vue实现跨区域拖放

Posted 2021-09-23 web半晨

目录

• • 1、关键代码
  • 2、完整代码

---

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 文件