type
status
date
slug
summary
tags
category
icon
password
Edited
Nov 9, 2024 02:37 PM
Created
Sep 21, 2022 06:53 AM
概述
HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
在这个过程中，最重要的三个点是：
- 让元素可拖拽
- 让另一个元素支持可放置
- 可拖拽和可放置元素之间的数据传递
使用
index.html完整页面：
index.js其中最重要的三个事件：
dragestart、 dragover、 drop- 元素可拖拽：DOM 属性上设置 draggable=true
- 元素可放置：监听 dragover 事件，事件中调用 preventDefault拖放数据传递；
- 可拖拽元素监听 dragstart 事件，调用 dataTransfer 对象的 setData 方法，可放置元素监听 drop 事件，使用 dataTransfer 对象的 getData 方法获取设置的数据。
- 放置处理对应的逻辑
API 详解
draggable
draggable 属性
当我们想让元素变成可拖拽时，我们就需要设置
draggable 属性。属性值未设置的情况下，默认是 auto，此时拖拽行为为浏览器默认行为，只有选中的文字，链接，图片可以拖动。
draggable 属性值不是 Boolean 类型，需要显式设置为 true 或者 false， true 为可拖动，false 为不可拖动（！！！）
拖拽事件
一个典型的拖拽操作是这样的：用户选中一个*可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）*元素，然后释放鼠标。
事件 | 触发时刻 |
drag | 当拖拽元素或选中的文本时触发。 |
dragend | 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). |
dragenter | 当拖拽元素或选中的文本到一个可释放目标时触发 |
dragexit | 当元素变得不再是拖拽操作的选中目标时触发。（不推荐使用，用dragleave代替） |
dragleave | 当拖拽元素或选中的文本离开一个可释放目标时触发。 |
dragover | 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。 |
dragstart | 当用户开始拖拽一个元素或选中的文本时触发 |
drop | 当元素或选中的文本在可释放目标上被释放时触发 |
事件分类：
- 可拖拽元素：dragstart，drag，dragend
- 可放置的元素：dragenter，dragover，drop，dragleave
事件常用的方式：
- dragstart: 设置拖拽数据，调整拖拽元素样式等
- drag：拖拽的移动跟踪
- dragend：判断拖拽操作是否成功（即是否在放置区释放，通过 dropEffect 判断），恢复拖拽元素样式等
- dragenter：设置样式，设置dropEffect等等
- dragover：设置为可放置区，设置dropEffect等等
- drop：处理放置事件
- dragexit：恢复样式
DataTransfer
DataTransfer 对象用于保存在拖放操作期间拖动的数据，同时还可以设置拖拽样式，读取拖拽文件等等。它可以包含一个或多个数据项，每个数据项包含一个或多个数据类型。
所有拖拽事件中我们都可以通过 event.dataTransfer 访问到它。
属性：
dropEffect：当前选定的拖放操作类型，一般在可放置元素的相关事件中设置
effectAllowed：提供可用的操作类型，一般在拖拽元素的相关事件中设置
files：包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表
items：提供一个包含所有拖动数据列表的DataTransferItemList对象 ，只读属性。
types：所有数据项类型的数组
方法：
clearData()：删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据
setData()：设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，类型列表中的最后一项将是新的类型。如果该类型的数据已经存在，则在相同位置替换现有数据
getData()：获取给定类型的数据，如果该类型的数据不存在或 dataTransfer不包含数据，则返回空字符串
setDragImage()：用于设置自定义的拖动图像。
参考链接：
- 作者:JinSo
- 链接:https://jinso365.top/article/drag-drop
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。