手记

Vue元素拖拽API

实现功能:把列表中的组件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事件中获取。
0人推荐
随时随地看视频
慕课网APP