HTML5 Drag and Drop

news2024/12/21 8:13:15

这是2个组合事件

dom对象分源对象和目标对象

绑定的事件也是分别区分源对象和目标对象

事件绑定

事件顺序

被拖拽元素，事件触发顺序是 dragstart->drag->dragend；

对于目标元素，事件触发的顺序是 dragenter->dragover->drop/dropleave。

其中drag和dragover会分别在源元素和目标元素反复触发。整个流程一定是dragstart第一个触发，dragend最后一个触发。

这里还有一个注意的点，如果某个元素同时设置了dragover和drop的监听，那么必须阻止dragover的默认行为，否则drop将不会被触发。

问题

drop事件里面的e.offsetY会收到目标对象内部的子节点影响（如果在目标节点的子节点上是否标签），拿到是相对子节点内部的x，y距离。

修复：

dragstart回调中给所有目标对象的子简单添加样式pointerEvents：none；让他们不会接受任何事件
dragend的时候，恢复所有对象目标子节点的样式为：pointerEvents：auto；

demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            height: 400px;
            overflow: auto;
            background-color: beige;
        }

        .inner {
            height: 1900px;
            position: relative;
        }

        .draggable {

            bottom: 10px;
            right: 10px;
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            position: fixed;
        }

        .inner_box {
            top: 1800px;
            right: 10px;
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="inner">
            <div class="inner_box"></div>
        </div>
    </div>
    <div draggable="true" class="draggable"></div>
    <script>
        const inner = document.querySelector(".inner");
        const source = document.querySelector(".draggable")
        const inner_box=document.querySelector(".inner_box");
        inner.addEventListener("dragover", (e) => {
            e.preventDefault();
            console.log("e.offsetY over", e.offsetY, e.target)
        });
        inner.dragenter = function (e) {
            console.log("e enter", e.offsetY)
        }
        //源目标开始拖拽时候
        source.addEventListener("dragstart", (e) => {
            console.log("e start", e.offsetY)
            //inner_box.style.pointerEvents="none";
        });
        inner.ondrop = function (e) {
            console.log("e", e.offsetY)
        }
    </script>
</body>

</html>