Question

我想为drop事件添加事件处理程序，我的第一个尝试是使用jquery 1.9.1

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

它可以工作吗？

为什么会这样？

Answer 1

jQuery不会自动规范化dataTransfer属性，您必须手动执行此操作。 E.g。

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

Answer 2

尝试

$(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>

Jquery：不支持drop事件？

2 个答案: