Jquery UI droppable 不适用于可拖动的 html 5

Question

我有一个应用了 HTML 可拖动的 div，以及一个应用了 jquery UI droppable 的容器。 问题是当我拖动我的 HTML div 并经过可放置容器时，容器的可放置容器不起作用。 我不能使用 HTML droppable 事件，因为我需要在可拖动事件出现时触发，out，enter 事件，out 和 enter，在 HTML droppable 的情况下，它不起作用。 （它考虑的是鼠标指针，而不是拖动元素）。

HTML

---

HTML 可拖动：

<div draggable="true" (dragstart)="handleDragStart($event)" (dragend)="handleDragEnd($event)"></div>

---

Jquery droppable 的 HTML :

<div class="large-container">
<div class="column-cell dynamically-created-div"></div>
<div class="column-cell dynamically-created-div"></div>
<div class="column-cell dynamically-created-div"></div>
...n number of droppable cells

</div>

JS

$('.column-cell').droppable(
  {
    tolerance: 'touch',
    out: function (event: any, ui: any) {
      let columnId = $(event.target).data('columnid');
      console.log('out from ', columnId);
    },
    over: function (event: any, ui: any) {
      let columnId = $(event.target).data('columnid');
      console.log('Over on ', columnId);
    },
    drop: (event: any, ui: any) => {
      let columnId = $(event.target).data('columnid');
      console.log('dropped to  ', columnId);
    }
  }
);

Answer 1

这需要一些研究。这应该将 Native HTML5 传递给每个事件的 jQuery UI Droppable。

测试示例：https://jsfiddle.net/ujqmxqjv/17/

HTML

<div draggable="true"></div>

<div class="large-container">
  <div class="column-cell dynamically-created-div"></div>
  <div class="column-cell dynamically-created-div"></div>
  <div class="column-cell dynamically-created-div"></div>
  ...n number of droppable cells
</div>

JavaScript

// Tell jQuery to include this property
$.event.addProp("dataTransfer");

$(function() {
  function pass2Drop(event, eventType) {
    var f = $(event.target).droppable("option", eventType);
    var el = event.dataTransfer.getData("text/html");
    var ui = {
      draggable: $(el),
      helper: $(el),
      position: {
        top: event.pageY,
        left: event.pageX
      },
      offset: {
        top: event.offsetY,
        left: event.offsetX
      }
    }
    f.call(event.target, event, ui);
  }

  $("div[draggable='true']").on("dragstart", function(ev) {
    var dt = ev.dataTransfer;
    dt.setData("text/html", ev.target.outerHTML);
  });

  $('.column-cell').droppable({
    tolerance: 'touch',
    activeClass: "ui-state-highlight",
    out: function(e, ui) {
      console.log("jQuery UI Out on " + $(e.target).index(), ui);
    },
    over: function(e, ui) {
      console.log("jQuery UI Over on " + $(e.target).index(), ui);
    },
    drop: function(e, ui) {
      console.log("jQuery UI Drop on " + $(e.target).index(), ui);
      console.log("Dropped: ", ui.draggable);
    }
  });

  $(".column-cell").on("dragover", function(ev) {
    ev.preventDefault();
    console.log("Native Drag Over on " + $(ev.target).index());
    pass2Drop(ev, "over");
  }).on("dragleave", function(ev) {
    console.log("Native Drag Leave on " + $(ev.target).index());
    pass2Drop(ev, "out");
  }).on("drop", function(ev) {
    if (ev.stopPropagation) {
      ev.stopPropagation(); // Stops some browsers from redirecting.
    }
    console.log("Native Drop on " + $(ev.target).index());
    pass2Drop(ev, "drop");
  });
});

我尝试.trigger() 事件，但效果更好。我们从 Droppable 中获取事件回调，创建 ui 并将 event 和 ui 传递给函数。这具有从原生事件触发它并传入预期元素的效果，以便我们的 jQuery UI 回调正常运行。