Jquery：不支持 drop 事件？答案

【问题标题】：Jquery: doesn't support drop event?Jquery：不支持 drop 事件？
【发布时间】：2013-02-18 03:23:36
【问题描述】：

我想为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);

可以吗？

为什么会这样？

【问题讨论】：

你导入 jquery-ui 了吗？
可能重复：using jquery .on for drop events when uploading files from the desktop?
@KyelJmD: 我不想使用 jquery ui，我想使用 html5 拖放

标签： jquery drag-and-drop

【解决方案1】：

jQuery 不会自动规范化 dataTransfer 属性，您必须手动进行。例如

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

【讨论】：

【解决方案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>

【讨论】：