Как остановить поведение Croppie Drag - PullRequest
Новая
       24

Как остановить поведение Croppie Drag

0 голосов
/ 12 марта 2019

У меня есть Кроппи внутри другого элемента, который сам по себе можно перетаскивать.Я хочу предотвратить поведение перетаскивания Кроппи, чтобы можно было перетаскивать внешний элемент (с помощью мыши над Кроппи) без перетаскивания Кроппи.На самом деле мне нужно включить и выключить это поведение.Я попробовал все обычные перестановки: 

$(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();
});

Кроппи несколько похоронен в моем коде.Он заключен в два элемента: 

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.

НоЯ не могу добраться до обработчиков событий Croppies без редактирования Croppie, что я не хочу делать.Хотелось бы, чтобы была просто дополнительная опция «enableDrag» вместе со всеми другими разрешениями.Есть еще идеи?

1 Ответ

0 голосов
/ 14 марта 2019

На самом деле, я думаю, что ваш код создает впечатление, что он выполняется правильно, потому что вы звоните: 

event.stopPropagation();

Который покоится на собственном объекте события. Тем не менее, он не ссылается на ваше событие "click". Если вы измените свой код на: 

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

Затем вы должны получить желаемое поведение. Если это не сработает, честно говоря, я в растерянности.

...