前言:其实拖拽也没这么复杂,严格来说是三个事件! 拖拽事件/拖拽后/拖拽到的位置接收元素
1、被拖拽的元素
<div draggable="true" @dragstart="dragEnterEvent($event,'传入当前元素的属性')" @dragend="dragEnterOver"></div>
2、接收元素
<div @drop="dropEvent($event,'接收位置的index')" @dragover.prevent >
至此即实现了!
// 拖拽开始 可以把一些参数插入拖拽元素内 dragEnterEvent(event, item) { const exportId = item.id ? item.exportId : item.userId; event.dataTransfer.setData("userId", exportId); // 传递userId event.dataTransfer.setData("id", item.id); // 传递旧的index }, // 拖拽结束 dragEnterOver(event) { console.log(event.dataTransfer); event.dataTransfer.clearData(); }, // 这里接收到元素 dropEvent(event, index) { event.preventDefault(); const userId = event.dataTransfer.getData("userId"); const id = event.dataTransfer.getData("id"); }