因为公司的一个项目需求，实现拖拽来交换位置，虽然知道有一些插件，但还是想有没有其它的快速实现方法，因为之前好像有了解过标签的拖拽属性，还稍微有点印象。就想试试。就在这里简单的做个总结。
需要给标签添加 draggable="true"
#### drag事件
- 当目标元素被拖动时触发该事件
- 开始拖动时，鼠标不松开，会一直触发该事件
document.addEventListener("drag", function( event ) {
console.log('拖动目标元素时触发drag事件')
}, false);
dragstart事件
- 当目标元素开始拖动时触发该事件
document.addEventListener("dragstart", function( event ) {
console.log('开始拖拽事件')
}, false);
dragover事件
- 放置目标元素时触发事件，放置到有效的放置目标时
- 鼠标不松开会一直触发该事件
document.addEventListener("dragover", function( event ) {
console.log('放置目标元素时触发事件 ')
}, false);
dragenter事件
- 可拖动的元素进入可放置的目标时触发，即拖动到一个有效的目标上
document.addEventListener("dragenter", function( event ) {
console.log('当可拖动的元素进入可放置的目标时高亮目标节点')
}, false);
dragleave事件
- 拖动元素离开可放置目标节点时触发，即离开有效目标时
- 一个标签相当于一个节点，包含html,body，但是不包含 head、没有高度的标签或者 display 属性为 none 的标签，其中的高度包含了 margin
document.addEventListener("dragleave", function( event ) {
console.log('当拖动元素离开可放置目标节点，重置其背景')
}, false);
drop事件
- 将拖动的元素到所选择的放置目标节点中时触发，即将拖动的元素放置到一个有效的目标中时触发
document.addEventListener("drop", function( event ) {
console.log('将拖动的元素到所选择的放置目标节点中')
}, false);
dragend事件
- 结束拖拽事件，鼠标松开结束拖动时触发
document.addEventListener("dragend", function( event ) {
console.log('结束拖拽事件')
}, false);
在vue中相关事件
-
@drag
-
@dragstart
-
@dragover
-
@dragenter
-
@dragleave
-
@drop
-
@dragend
<li
draggable="true"
@dragstart="dragstarts($event,index)"
@dragend="dragengs"
@dragenter="dragenters($event,index)"
>
MDN链接： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drag_event