实现功能：把列表中的组件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事件中获取。 |
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦