H5原生拖拽Demo

仔仔
JS笔记
2023-05-23
1607热度
0评论

drag：在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。（拖放开始每几百毫秒一次）
dragstart：在用户开始拖动元素或被选择的文本时调用。（拖放开始）【在拖动开始时设置透明度】
dragend：在拖放操作结束时触发。（拖放结束释放鼠标）【在拖放结束时重置不透明度】
dragover：在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时触发。（进入有效目标每几百毫秒一次）
dragenter：在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发。（进入有效目标）【dragenter 事件触发时放置区域的样式】
dragleave：在拖动的元素或选中的文本离开一个有效的放置目标时被触发。（离开有效目标）
drop：在元素或选中的文本被放置在有效的放置目标上时被触发。（放置在有效目标并释放鼠标）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .zl-draggable-el {
        margin: 10px 0;
        background: white;
    }

    #zl-draggable-box {
        width: 200px;
        height: 100px;
        background: pink;
        margin: 10px;
        padding: 10px;
        cursor: pointer;
    }

    .zl-draggable-target-box {
        width: 200px;
        height: 100px;
        background: blueviolet;
        margin: 10px;
        padding: 10px;
    }

    .zl-draggable-target-box.dragover {
        background-color: purple;
    }

    .dragging {
        opacity: .5;
    }
    </style>
</head>

<body>
    <div id="zl-draggable-box">
        <div class="zl-draggable-el" draggable="true">item001
        </div>
        <div class="zl-draggable-el" draggable="true">
            item002
        </div>
        <div class="zl-draggable-el" draggable="true">
            item003
        </div>
    </div>
    <div class="zl-draggable-target-box" id="droptarget"></div>
    <script>
    const drag = function() {
        let dragged; // 拖拽的元素

        const sourceBox = document.getElementById('zl-draggable-box');

        // console.log("dragging 拖放开始 每几百毫秒一次");
        sourceBox.addEventListener("drag", (event) => {

        });


        // console.log("dragstart 拖放开始");
        sourceBox.addEventListener("dragstart", (event) => {
            dragged = event.target;
            event.target.classList.add("dragging");
        });

        // console.log("dragend 拖放结束 释放鼠标");
        sourceBox.addEventListener("dragend", (event) => {
            event.target.classList.remove("dragging");
        });


        const target = document.getElementById("droptarget");

        // console.log("dragover 进入有效目标 每几百毫秒一次");
        target.addEventListener("dragover", (event) => {
            event.preventDefault();
        }, false);


        //  console.log("dragenter 进入有效目标");
        target.addEventListener("dragenter", (event) => {
            if (event.target.classList.contains("zl-draggable-target-box")) {
                event.target.classList.add("dragover");
            }
        });


        // console.log("dragleave 离开有效目标")
        target.addEventListener("dragleave", (event) => {

            if (event.target.classList.contains("zl-draggable-target-box")) {
                event.target.classList.remove("dragover");
            }
        });


        // console.log("drop 放置在有效目标并释放鼠标")
        target.addEventListener("drop", (event) => {
            event.preventDefault();
            if (event.target.classList.contains("zl-draggable-target-box")) {
                event.target.classList.remove("dragover");
                dragged.parentNode.removeChild(dragged);
                event.target.appendChild(dragged);
            }
        });
    }
    drag();
    </script>
</body>

</html>