vue实现跨区域拖放

1、关键代码

dragend(item) { console.log(item); if (this.oldItem != this.newItem) { let oldIndex = this.List.indexOf(this.oldItem); let newIndex = this.List.indexOf(this.newItem); let oldflag = false let newflag = false if (oldIndex === -1) { oldflag = true oldIndex = this.list.indexOf(this.oldItem); } if (newIndex === -1) { newflag = true newIndex = this.list.indexOf(this.newItem); } let newList = [...this.List]; // 中间数组，用于交换两个节点 let newlist = [...this.list]; // 中间数组，用于交换两个节点 if (!oldflag) { newList.splice(oldIndex, 1); } else { newlist.splice(oldIndex, 1); } if (!newflag) { newList.splice(newIndex, 0, this.oldItem); } else { newlist.splice(newIndex, 0, this.oldItem); } // 删除老的节点 // newList.splice(oldIndex, 1); // // 在列表目标位置增加新的节点 // newList.splice(newIndex, 0, this.oldItem); // // 更新this.List，触发transition-group的动画效果 this.List = [...newList]; this.list = [...newlist]; } } 

2、完整代码

gitee(码云) - mj01分支 - dragAndDrop 文件