javascript - 检测 jQuery 中的拖动取消

Question

我可以使用下面的代码在 vanilla js 中实现取消检测。

el.addEventListener('dragend', event => {
  let cancelled = event.dataTransfer.dropEffect === 'none';
  if(cancelled) {
    // do something when drag cancelled.
  }
}, false);

但是当我尝试将此代码段转换为 jQuery 版本时失败，因为 jQuery 将事件包装到不拥有 dataTransfer 属性的 jQuery 事件中。

el.on('dragend', event => {
  console.log(event.dataTransfer); // => undefined
});

我想知道如何使用 jQuery 检测拖动取消。
顺便说一句，我没有使用 jQuery UI但我想尝试一下，事情是否会变得更容易。

Answer 1

您可以使用jQuery事件的.originalEvent属性来获取.dataTransfer属性

$("div")
.on("dragend", function(e) {
  console.log(e.originalEvent.dataTransfer)
})

div {
  padding: 8px;
  margin: 8px;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div draggable>drag</div>
<div droppable>drop</div>