实现功能：把列表中的组件A，拖拽(复制)到另一个元素中。
这里有两个关键点，1.拖拽元素 2.目标元素，只要把这两个元素需要做的事情完成就可以了。
拖拽元素生命周期：开始拖动 => 正在拖放 => 拖拽完成
目标元素生命周期：进入 => 移动 => 离开/鼠标放开 => 拖拽完成
| API | 作用对象 | 说明 |
|---|---|---|
| ondragstart | 拖拽元素 | 开始拖动事件 |
| ondrag | 拖拽元素 | 正在拖放事件 |
| ondragend | 拖拽元素 | 整个拖放事件完毕 |
| ondragenter | 目标元素 | 进入目标元素范围事件 |
| ondragover | 目标元素 | 在目标元素范围内移动 |
| ondragleave | 目标元素 | 离开目标元素范围 |
| ondrop | 目标元素 | 在目标元素范围内鼠标松开事件 |
1.拖拽元素
1.1 设置属性
draggable=true，该元素，此时就可以拖动了
<div draggable=true />
1.2绑定事件
ondragstart： 元素开始被拖动时触发 作用在拖拽元素上
<div draggable=true @dragstart="e => dragstartHandler(e)"/>
在dragstartHandler中保存拖拽元素的信息，用于拖拽完毕后读取该信息进一步处理。
2.DataTransfer对象
DataTransfer对象用于拖拽元素和目标元素之间的数据通讯。
| API | 作用对象 | 说明 |
|---|---|---|
| effectAllowed | 拖拽元素 | 设置被拖动元素允许发生的拖动行为。 该属性值可设置为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。 在dragstart事件中设置。如：e.dataTransfer.effectAllowed = ‘copyMove’ |
| dropEffect | 目标元素 | 设置拖放目标上允许发生的拖放行为。 属性值只允许none、copy、link、move值之一。 在dragenter和dragover中设置。 |
| setData(key, value) | 拖拽元素 | 设置和目标元素传递的数据。 一般在dragstart事件中设置。 |
| getData(key) | 目标元素 | 获取设置好的数据。 一般在ondrop事件中获取。 |
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦