1

我想为事件添加一个事件处理程序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);

它可以工作吗？

为什么会这样？

4

2 回答 2

2

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

jQuery.event.props.push("dataTransfer");
于 2013-03-04T05:03:29.403 回答
1

尝试

$(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-04T05:00:34.433 回答