javascript - html5 拖放使用 jquery(不是 jquery UI)

Question

我想实现 w3schools EXAMPLE对于 html5 拖放，使用 jquery 而不是 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));
  });
});

Answer 1

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

e.originalEvent

Fixed 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));
  });
});