vue拖拽
// 拖动的对象,需要设置draggable属性为true(draggable="true"),
// a元素需要href,img元素需要src。
// 1、被拖对象:dragstart事件,被拖动的元素,开始拖放触发
// 2、被拖对象:drag事件,被拖放的元素,拖放过程中
// 3、经过对象:dragenter事件,拖放过程中鼠标经过的元素,被拖放的元素“开始”进入其它元素范围内(刚进入)
// 4、经过对象:dragover事件,拖放过程中鼠标经过的元素,被拖放的元素正在本元素范围内移动(一直)
// 5、经过对象:dragleave事件,拖放过程中鼠标经过的元素,被拖放的元素离开本元素范围
// 6、目标地点:drop事件,拖放的目标元素,其他元素被拖放到本元素中
// 7、被拖对象:dragend事件,拖放的对象元素,拖放操作结束
元素拖拽
需要拖拽的元素添加draggable为true,false为不能拖拽
draggable="true"
拖拽元素事件
拖拽元素的时候,被拖拽元素会触发以下事件
- dragstart
- drag
- dragend
目标元素事件
当拖拽的元素拖到一个目标元素上时,目标元素会触发以下事件
- dragenter
- dragover
- dragleave
- drop
拖拽设置
在dataTransfer中还有两个重要的属性
dropEffect和effectAllowed
dropEffect
dropEffect属性值为字符串,表示被拖动元素可以执行哪一种放置行为
要使用这个属性,必须在dragenter事件处理函数中设置
- none 不能把元素拖放至此(除文本框外全部元素的默认值)
- move 移动到目标
- copy 复制到目标
- link 目标打开拖动元素(拖动元素必须是链接并有URL)
effectAllowed
effectAllowed属性值也是字符串,表示允许拖动元素哪种dropEffect
要使用这个属性,必须在dragst事件处理函数中设置
- uninitialized 没有设置任何拖放行为
- none 不能由任何行为
- copy 仅允许dropEffect值为copy
- link 仅允许dropEffect值为link
- move 仅允许dropEffect值为move
- copyLink 允许dropEffect值为copy和link
- copyMove 允许dropEffect值为copy和move
- linkMove 允许dropEffect值为link和move
- all 允许任意dropEffect