使用jQuery（而非jQuery UI）实现HTML5拖放

Question

我希望能够使用jQuery实现w3schools的HTML5拖放示例，而不是使用JavaScript。

这是我的jQuery实现JSFIDDLE。

我只是将HTML中内联事件的声明更改为了jQuery on()方法，其他一切保持不变。

我无法理解为什么jQuery不能识别像drop dragstart这样的事件，而我在网上看到很多代码片段都可以实现。

HTML:

<div id="div1"></div>
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" width="336" height="69">

JQUERY:

$(document).ready(function(){
  $("#div1").on("dragover",function(e){
    e.preventDefault();
  });
  $("#drag1").on("dragstart",function(e){
    e.dataTransfer.setData("Text",ev.target.id);
  });
  $("#div1").on("drop",function(e){
    e.preventDefault();
    var data=e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));
  });
});

- Sagi_Avinash_Varma

Answer 1

您想要使用原始事件而不是jQuery事件来获取/设置数据：

e.originalEvent

修复的jsFiddle

$(document).ready(function(){
  $("#div1").on("dragover",function(e){
    e.preventDefault();
  });
  $("#drag1").on("dragstart",function(e){
    e.originalEvent.dataTransfer.setData("Text",e.target.id);
  });
  $("#div1").on("drop",function(e){
    e.preventDefault();
    var data=e.originalEvent.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));
  });
});

- A. Wolff