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事件？

回答

相关问题