HTML5 drag&drop基础用法

鲸落于洲

已于 2022-11-26 15:48:36 修改

阅读量396

点赞数

分类专栏： JavaScript 文章标签： html5 前端 html

于 2022-11-25 18:29:51 首次发布

本文链接：https://blog.youkuaiyun.com/xwzshjydxx/article/details/128042496

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML5的drag和drop事件，包括拖动事件的标准方法如添加、删除和获取数据，以及拖放事件的触发顺序。同时讲解了如何通过设置draggable属性和绑定事件监听器实现拖放功能，详细阐述了ondragstart、ondrag、ondragend等事件以及ondragenter、ondragover、ondragleave、ondrop等相关处理函数。最后提到了如何利用classList修改元素CSS类以及元素的appendChild方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

drag事件

drag 事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。

addEventListener('drag', (event) => {});

ondrag = (event) => { };

`dragEvent.dataTransfer`

DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。

它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。

标准方法

DataTransfer.clearData()

删除与给定类型关联的数据。如果类型为空或未指定，则删除所有数据。如果指定类型的数据不存在，或者 data transfer 中不包含任何数据，则不删除数据。
DataTransfer.getData()

检索给定类型的数据，如果数据不存在，则返回空字符串。
DataTransfer.setData()

设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾。如果该类型的数据已经存在，则在相同位置替换现有数据。
DataTransfer.setDragImage()

用于设置自定义的拖动图像。void dataTransfer.setDragImage(img, xOffset, yOffset);img为element元素，x y为图片的偏移量；发生拖动时，从拖动目标 (dragstart事件触发的元素) 生成半透明图像，并在拖动过程中跟随鼠标指针。

拖放事件

此为触发顺序：

dragstart ：用户开始拖动一个元素或者一个选择文本的时候
drag ：用户拖动元素，每隔几百毫秒就会被触发一次
dragenter ：进入有效的放置目标，触发一次
dragover ：当元素或者选择的文本被拖拽到一个有效的放置目标上时，在抓着的节点上触发；默认事件为重置当前的拖拽动作为"none"，所以要阻止默认事件event.preventDefault();
dragleave ：离开一个有效的放置目标，触发一次
drop ：在元素被放置在有效的放置目标上时被触发
dragend ：在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）

标签内绑定属性

设置元素属性draggable 为 true

拖动过程触发的函数：

ondragstart
ondrag
ondragend

释放目标时触发的函数：

ondragenter
ondragover
ondragleave
ondrop

事件传递对象： dragEvent.dataTransfer

代码演示：

classList 属性是只读的，但可以使用 add() 和 remove() 方法修改元素的css类
使用 appendChild() 方法移除元素到另外一个元素；如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。

<!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>
        #draggable {
            width: 200px;
            height: 20px;
            text-align: center;
            background: white;
        }

        .dropzone {
            width: 200px;
            height: 100px;
            background: blueviolet;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="dropzone">
        <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
            This div is draggable
        </div>
    </div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>

    <script>
        var dragged;

        /* 可拖动的目标元素会触发事件 */
        document.addEventListener("drag", function (event) {
            // console.log("drag")
        }, false);

        document.addEventListener("dragstart", function (event) {
            // 保存拖动元素的引用 (ref.)
            dragged = event.target;
            // 使其半透明
            event.target.style.opacity = .5;
        }, false);

        document.addEventListener("dragend", function (event) {
            // 重置透明度
            console.log("dragend")
            event.target.style.opacity = "";
        }, false);

        /* 放下目标节点时触发事件 */
        document.addEventListener("dragover", function (event) {
            // 阻止默认动作！！！不然无法放下节点
            console.log("dragover")
            event.preventDefault();
        }, false);

        document.addEventListener("dragenter", function (event) {
            console.log("进入了另一个区域一次")
            // 当可拖动的元素进入可放置的目标高亮目标节点
            if (event.target.className == "dropzone") {
                event.target.style.background = "purple";
            }

        }, false);

        document.addEventListener("dragleave", function (event) {
            console.log("离开了当前区域一次")
            // 当拖动元素离开可放置目标节点，重置其背景
            if (event.target.className == "dropzone") {
                event.target.style.background = "";
            }

        }, false);

        document.addEventListener("drop", function (event) {
            // 阻止默认动作（如打开一些元素的链接）
            event.preventDefault();
            console.log(event.target)
            // 移动拖动的元素到所选择的放置目标节点，通过className来判断是否移动到目标画布上，其他判断函数同理
            if (event.target.className == "dropzone") {
                event.target.style.background = "";
                // 上面保存节点引用，删除原来的节点，在目标画布event添加新节点；
                dragged.parentNode.removeChild(dragged);
                event.target.appendChild(dragged);
            }

        }, false);

    </script>
</body>

</html>