如何停止 Croppie 拖动行为

Question

我在另一个本身可拖动的元素内有 Croppie。我想阻止 Croppie 的拖动行为，以便可以拖动外部元素（通过鼠标悬停在 Croppie 上）而无需拖动 Croppie。实际上我需要打开和关闭这种行为。我已经尝试了所有常见的排列方式：

$(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 有点隐藏在我的代码中。它包含在两个 div 中：

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 的插件中。

但是如果不编辑我不想做的 Croppie，我就无法访问 Croppies 事件处理程序。我希望只有一个附加的“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();
});

然后您应该获得所需的行为。如果这不起作用，说实话我很茫然。