HTML5 drag&drop基础用法

鲸落于洲

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

阅读量332

点赞数

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

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

本文链接：https://blog.csdn.net/xwzshjydxx/article/details/128042496

版权

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

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

ondrag = (event) => { };

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

拖动过程触发的函数：

释放目标时触发的函数：

事件传递对象： dragEvent.dataTransfer

代码演示：

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

<head>
    <meta charset

关注

专栏目录