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

Question

我想使用jquery而不是javascript 来实现html5拖放的w3schools EXAMPLE.

这是我在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

修正了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));
  });
});