vue实现元素拖动并互换位置

项目场景：

在使用Vue的场景下，需要实现对元素进行拖动交换位置。

---

需求分析：

1、两两交换的其实是数组的下标。数据内容不变。
2、拖拽功能需要用到一下API。

方法名	详解
ondraggable	设置元素是否允许被拖动。链接和图片默认是可拖动，因此不用设置该属性
ondragstart	用户开始拖动元素或选择的文本时触发。
ondragover	拖动元素或选取的文本正在拖动到放置目标时触发。 默认情况下，数据/元素不能放置到其他元素中。 如果要实现改功能，我们需要防止元素的默认处理方法。 我们可以通过调用 event.preventDefault()方法来实现 ondragover 事件。
ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragend	用户完成元素拖动后触发

关于更多的API介绍可以看点这里

---

代码实现：

<table>
	<thead>
		<tr>
			<th>标题1</th>
			<th>标题2</th>
			<th>标题3</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(items,index) in dataList" :key="index"
			draggable="true"
            @dragstart="handleDragStart($event, items)"
            @dragover.prevent="handleDragOver($event, items)"
            @dragenter="handleDragEnter($event, items)"
            @dragend="handleDragEnd($event, items)"
        >
			<td>{{items.content}}</td>
		</tr>
	</tbody>
</table>

<script>
	var VM = new Vue({
		el:'#app',
		data:function(){
			return {
				dataList:[{
					content:'内容'
				},{
					content:'内容'
				},{
					content:'内容'
				}],
				dragging: null
			}
		},
		methods:{
			handleDragStart(e,items){
                this.dragging = items;//开始拖动时，暂时保存当前拖动的数据。
            },
            handleDragEnd(e,items){
                this.dragging = null;//拖动结束后，清除数据
            },
            handleDragOver(e) {
                e.dataTransfer.dropEffect = 'move';//在dragenter中针对放置目标来设置!
            },
            handleDragEnter(e,items){
                e.dataTransfer.effectAllowed = "move";//为需要移动的元素设置dragstart事件
                if(items == this.dragging) return;
                var newItems = [...this.dataList];//拷贝一份数据进行交换操作。
                var src = newItems.indexOf(this.dragging);//获取数组下标
                var dst = newItems.indexOf(items);
                newItems.splice(dst, 0, ...newItems.splice(src, 1));//交换位置
                this.dataList = newItems;
            }
		}
	})
</script>

关于Array.prototype.splice()