ondragover和ondragleave触发时机分别是什么时候,

怎么感觉是同时触发

这个头像是黑豹 2018-09-21

源自：HTML5拖拽上传 4-3 拖拽问卷（3）

收起

1回答

好帮手慕星星 2018-09-21 13:46:00

ondragover - 当被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当鼠标拖动的对象离开其容器范围内时触发此事件

自己可以测试一下下面的代码哦：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
    #droptarget {
        float: left;
        width: 200px;
        height: 35px;
        margin: 55px;
        margin-top: 155px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
    </style>
</head>

<body>
    <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">把我拖动到矩形框中！</p>
    <div id="droptarget" ondrop="drop(event)" ondragover="dragover(event)" ondragleave="dragleave(event) ">
    </div>
    <p id="demo"></p>
    <script>
    function dragStart(event) {
        event.dataTransfer.setData("Text", event.target.id);
    }

    function dragover(event) {
        event.preventDefault();
        document.getElementById("demo").innerHTML = " p元素在div范围内";
    }

    function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
        document.getElementById("demo").innerHTML = " p 元素被拖动";
    }

    function dragleave(event) {
        event.preventDefault();
        document.getElementById("demo").innerHTML = " p离开div范围";
    }
    </script>
</body>

</html>

祝学习愉快~~

收起回答