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