HTML-drag介绍HTML中的dragApi：dragstart、 darg、 dragenter、dragover

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

<!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>drag</title>
    <style>
        body {
            /* Prevent the user selecting text in the example */
            user-select: none;
        }

        #draggable {
            text-align: center;
            background: white;
        }

        .dropzone {
            width: 200px;
            height: 20px;
            background: blueviolet;
            margin: 10px;
            padding: 10px;
        }

        .dropzone.dragover {
            background-color: purple;
        }

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

<body>
    <div class="dropzone">
        <div id="draggable" draggable="true">
            这个 div 可以拖动
        </div>
    </div>
    <div class="dropzone" id="droptarget"></div>

    <script>
        let dragged;

        /* events fired on the draggable target */
        const source = document.getElementById("draggable");
        source.addEventListener("drag", (event) => {
            console.log("drag");
        });

        source.addEventListener("dragstart", (event) => {
            // store a ref. on the dragged elem
            dragged = event.target;
            // make it half transparent
            event.target.classList.add("dragstart");
            console.log('dragstart')
        });

        source.addEventListener("dragend", (event) => {
            // reset the transparency
            event.target.classList.remove("dragend");
            console.log('dragend')
        });

        /* events fired on the drop targets */
        const target = document.getElementById("droptarget");
        target.addEventListener("dragover", (event) => {
            // prevent default to allow drop
            event.preventDefault();
            console.log('dragover')
        }, false);

        target.addEventListener("dragenter", (event) => {
            // highlight potential drop target when the draggable element enters it
            if (event.target.classList.contains("dropzone")) {
                event.target.classList.add("dragover");
            }
            console.log('dragenter')
        });

        target.addEventListener("dragleave", (event) => {
            // reset background of potential drop target when the draggable element leaves it
            if (event.target.classList.contains("dropzone")) {
                event.target.classList.remove("dragover");
            }
            console.log('dragleave')
        });

        target.addEventListener("drop", (event) => {
            // prevent default action (open as link for some elements)
            event.preventDefault();
            // move dragged element to the selected drop target
            if (event.target.classList.contains("dropzone")) {
                event.target.classList.remove("dragover");
                dragged.parentNode.removeChild(dragged);
                event.target.appendChild(dragged);
            }
            console.log('drop')
        });

    </script>
</body>

</html>