jquery：不支持drop事件？

我想要一個事件處理程序添加到drop事件，我第一次嘗試是使用jquery 1.9.1jquery：不支持drop事件？

var dropIt = function (e) { 
    console.log(e); 
    console.log(e.dataTransfer); 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

    $('#drop-area').on('drop',dropIt);

但這不能打印e.dataTransfer，當我使用的由來：

$('#drop-area')[0].addEventListener('drop', dropIt, false);

它可以工作？

爲什麼會發生這種情況？

來源

2013-03-04 hh54188

您是否導入了jquery-ui？ – KyelJmD 2013-03-04 04:55:26

可能的重複：[在從桌面上傳文件時使用jquery.on進行drop事件？]（http://stackoverflow.com/questions/9544977/using-jquery-on-for-drop-events-when-uploading-files - 從桌面） – Boaz 2013-03-04 04:56:13

@KyelJmD：我不想使用jquery ui，我想使用html5拖放 – hh54188 2013-03-04 04:56:46

的jQuery不會自動正常化dataTransfer屬性，你必須做手工。例如。

jQuery.event.props.push("dataTransfer");

來源

2013-03-04 05:03:29 Musa

嘗試

$(document).on('drop','#drop-area',dropIt);

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
     </style> 
     <script type="text/javascript"> 
      function allowDrop(ev) 
      { 
       ev.preventDefault(); 
      } 

      function drag(ev) 
      { 
       ev.dataTransfer.setData("Text",ev.target.id); 
      } 

      function drop(ev) 
      { 
       ev.preventDefault(); 
       var data=ev.dataTransfer.getData("Text"); 
       ev.target.appendChild(document.getElementById(data)); 
      } 
     </script> 
    </head> 
    <body> 
     <p>Drag the W3Schools image into the rectangle:</p> 
     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
     <br /> 
     <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 
    </body> 
</html>

來源

2013-03-04 05:00:34

jquery：不支持drop事件？

回答

相關問題