如何停止农作物阻力行为

Question

我在另一个可拖动的元素内有农作物。我想防止农作物的阻力行为，以便在不拖动的情况下（鼠标上的鼠标上）可以将外部元素拖动（鼠标上方）。实际上，我需要打开和关闭此行为。我尝试了所有通常的排列：

$(instance.data.newDiv0).on("click", function() {
    console.log("outermatte clicked");
    instance.triggerEvent('outerClicked'); // Triggers Bubble event to save new picture position
  event.stopPropagation();
  event.stopImmediatePropagation();
  event.preventDefault();
});

Croppie在我的代码中有些埋葬。它包裹在两个divs中：

instance.data.newDiv0 = $('<div class="outermatte" id=' + instance.data.outermatte + '><span class="BigNum"></span></div>');                          
    instance.canvas.append(instance.data.newDiv0);
    instance.data.newDiv1 = $('<div class="innermatte"  id=' + instance.data.innermatte + '></div>');
    instance.canvas.append(instance.data.newDiv1);

并动态写入：

var basic = $(instance.data.newDiv1).croppie({
    viewport: { width: (instance.data.canvas_width * properties.pic_mat_ratio / 100), height: (instance.data.canvas_height * properties.pic_mat_ratio / 100 * instance.data.frame_ratio) },
    boundary: { width: (instance.data.canvas_width * properties.pic_mat_ratio / 100), height: (instance.data.canvas_height * properties.pic_mat_ratio / 100 * instance.data.frame_ratio) },
    showZoomer: false,
    enableZoom: properties.enableZoom,
    enableResize: false, //properties.enableResize,
    enableOrientation: properties.enableOrientation,
    enforceBoundary: true,
    enableExif: true,
  customClass: "mycroppie",
    update: function (data) {  //when Croppie updates
    results = basic.croppie('get');
      if (results.points[2] > 0 || results.points[3] > 0) {
        instance.publishState("stateZoom", results.zoom);
        instance.publishState("stateTopLeftX", results.points[0]);
        instance.publishState("stateTopLeftY", results.points[1]);
        instance.publishState("stateBottomRightX", results.points[2]);
        instance.publishState("stateBottomRightY", results.points[3]);
        instance.triggerEvent("croppieChanged");
        console.log("CROPPIE CHANGED: " + " " + results.points[0] + " " + results.points[1] + " " + results.points[2] + " " + results.points[3] + " " + results.zoom);
      }
    }
});

basic.croppie('bind', {
    url: properties.image_url,
    points: [properties.topLeftX, properties.topLeftY, properties.bottomRightX, properties.bottomRightY],
    zoom: properties.zoom,
    orientation: properties.orientation
});

以及bubble.is内的插件中的所有内容。

但是，如果没有编辑我不想做的裁剪，我就无法进入农作物活动处理程序。我希望只有一个添加的" enabledrag"选项以及所有其他启用。还有其他想法吗？

Answer 1

实际上，我认为您的代码给人的印象是它正在正确执行，因为您正在打电话：

event.stopPropagation();

属于本机事件对象。但是，它没有引用您的"点击"事件。如果将代码更改为：

$(instance.data.newDiv0).on("click", function(e) {
    console.log("outermatte clicked");
    instance.triggerEvent('outerClicked'); 
    e.stopPropagation();
    e.stopImmediatePropagation();
    e.preventDefault();
});

您应该得到所需的行为。如果这不起作用，老实说我会茫然。