Vue利用Drag实现列表的拖拽排序

基础属性

draggable：true，表示元素可以被拖动; false，表示元素不可以被拖动

拖拽事件

Event	On Event Handler	Fires when…
drag	ondrag	当拖动元素或选中的文本时触发
dragend	ondragend	当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)
dragenter	ondragenter	当拖动元素或选中的文本到一个可释放目标时触发
dragexit	ondragexit	当元素变得不再是拖动操作的选中目标时触发
dragleave	ondragleave	当拖动元素或选中的文本离开一个可释放目标时触发
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）
dragstart	ondragstart	当用户开始拖动一个元素或选中的文本时触发
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发

具体实现

1、设置 div 元素属性 draggable="true" 实现可拖拽

<div draggable="true"></div>

2、设置元素被拖拽时的各阶段事件，进行列表位置交换

<template>
	<div v-for="(item, index) in list" :key="index" draggable="true" @dragstart="handleDragStart(index)"
          @dragenter="handleDragEnter($event, index)" @dragend="handleDragEnd">
        {{item.name}}
	</div>
</template>
<script>
    export default {
        data () {
            return {
                list: [],
                dragFrom: -1,
                dragTo: -1
            }
        },
        methods: {
            handleDragStart (index) {
              this.dragFrom = index
            },
            handleDragEnter (event, index) {
              event.dataTransfer.effectAllowed = 'move'
              this.dragTo = index
            },
            handleDragEnd () {
              const newEle = this.list
              newEle.splice(this.dragTo, 0, ...newEle.splice(this.dragFrom, 1))
              this.dragFrom = -1
              this.dragTo = -1
            }
        }
    }
</script>