Jquery:不支持drop事件?

时间:2013-03-04 04:53:05

标签: jquery drag-and-drop

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

它可以工作吗?

为什么会这样?

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分: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>