【ElementUI中el-tree节点拖拽】

//html
<el-scrollbar class="commonScrollbar" ref="commonScrollbar">
	<el-tree
		:data="rootNodeData"
		class="catalogTree"
		ref="catalogTree"
		highlight-current
		node-key="id"
		:expand-on-click-node="false"//点击节点后是否展开节点
		@node-drag-over="handleDragOver"
		@node-drop="handleDrop"
		:allow-drop="allowDrop"
		:allow-drag="allowDrag"
		draggable>
		<span class="customTreeNode" slot-scope="{ node, data }" :id="data.id"></span>//id用于跳转选中节点
	</el-tree>
</el-scrollbar>

//methods
/**
* 树节点拖拽的hover事件
*/
handleDragOver(draggingNode, dropNode, ev) {
	//配合拖动时的滚动
	if (ev.clientY < 120) {//86
		this.$refs.commonScrollbar.wrap.scrollTop -= 10;
	} else if (ev.clientY > (this.$refs.commonScrollbar.wrap.offsetHeight + 40)) {
		this.$refs.commonScrollbar.wrap.scrollTop += 10;
	}
},
/**
 * 树节点拖拽事件
 */
handleDrop(draggingNode, dropNode, dropType, ev) {
	// console.log("dropNode",dropNode)
	// console.log("draggingNode",draggingNode)
	let orderType;
	let canSaveOrder = true;
	if (!dropNode.loaded && dropType == "inner" && !dropNode.isLeaf) {
		orderType = 'top';
	} else {
		orderType = 'normal';
	}
	//如果拖动到内部，确保dropNode可以展开
	if (dropType == "inner") {
		dropNode.isLeaf = false;
	}
	this.$nextTick(() => {
		let oldOrderNodeParamData = [];
		let oldParent;
		let oldParentC;
		let oldParentLevel;
		if (draggingNode.data.parentId == '0') {
			oldParentLevel = 0;
			oldParentC = this.$refs.catalogTree.$children[0].node.parent.childNodes;
			// console.log("oldParentC-this.$refs.catalogTree",oldParentC)
		} else {
			oldParent = this.$refs.catalogTree.getNode(draggingNode.data.parentId);
			oldParentC = oldParent.childNodes;
			oldParentLevel = oldParent.level;
		}
		oldParentC.forEach((element, i) => {
			var oldOrderNode = {
				id: element.data.id,
				parentId: element.data.parentId,
				order: i + 1,
				name: element.data.name,
				orderType: 'normal'
			};
			oldOrderNodeParamData.push(oldOrderNode);
		});
		// console.log("oldOrderNodeParamData",oldOrderNodeParamData);

		var newOrderNodeParamData = [];
		// 当拖拽类型不为inner,说明只是同级或者跨级排序，只需要寻找目标节点的父ID，获取其对象以及所有的子节点，并为子节点设置当前对象的ID为父ID即可
		// 当拖拽类型为inner，说明拖拽节点成为了目标节点的子节点，只需要获取目标节点对象即可
		var newParentLevel = dropType != "inner" ? dropNode.parent.level : dropNode.level;
		var data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
		var nodeData = dropType != "inner" ? dropNode.parent.childNodes : dropNode.childNodes;
		// console.log("data",data)
		// console.log("nodeData",nodeData)

		//获取拖拽节点进入的节点的id,以确保后续变更被拖拽节点的父ID
		let parentId = dropType != "inner" && dropNode.parent.level == 0 ? "0" : data.id;

		nodeData.forEach((element, i) => {
			var orderNode = {
				id: element.data.id,
				parentId: parentId,
				order: i + 1,
				name: element.data.name,
				orderType: orderType
			};
			newOrderNodeParamData.push(orderNode);
		});
		// console.log("newOrderNodeParamData",newOrderNodeParamData)

		let oldParentId = '';
		if (oldOrderNodeParamData.length == 0) {
			oldParentId = draggingNode.data.parentId;
		}

		// 得到这次操作需要变更的数据范围，请求后台批量处理即可...
		this.$axios.questionBank.saveProblemStor({
			newOrderNodeParamData: newOrderNodeParamData,
			oldOrderNodeParamData: oldOrderNodeParamData,
			doorProblemId: draggingNode.data.id,
			oldParentId: oldParentId
		}).then(res => {
			if (res.data.data == 'haveRepeat') {
				this.$message.error('文件夹中含有同名文件，不可拖动');
			}
			//对比draggingNode原来的父节点节点和dropNode节点的level，先刷新level数值大的
			setTimeout(() => {
				if (oldParentId == parentId) {
					this.refreshNodeBy(parentId, {type: 'noScroll', refresh: true});//new
				} else if (oldParentLevel <= newParentLevel) {
					this.refreshNodeBy(draggingNode.data.parentId, {type: 'noScroll'});//old
					this.refreshNodeBy(parentId, {type: 'noScroll', refresh: true});//new
				} else {
					this.refreshNodeBy(parentId, {type: 'noScroll', refresh: true});
					this.refreshNodeBy(draggingNode.data.parentId, {type: 'noScroll'});
				}
			}, 1000)
		})
	})
},
/**
 * 树节点允许被拖入事件
 */
allowDrop(draggingNode, dropNode, type) {
	// console.log("allow-dropNode",dropNode)
	// console.log("allow-draggingNode",draggingNode)
	//问题不能拖动到一级目录
	if (draggingNode.data.type == '2' && dropNode.level == 1) {
		return type == 'inner' && dropNode.data.permissionType == '2';
		//付级节点无权限，子节点有权限时，只能拖动到子节点的内部，不能拖动到子节点前后位置
	} else if (dropNode.parent.data.constructor != Array && dropNode.parent.data.permissionType != '2' && dropNode.data.permissionType == '2') {
		return type == 'inner';
		//不能拖动到没有权限的文件夹中
	} else if (dropNode.data.permissionType != '2' && dropNode.level != 1) {
		return false;
		//可以将文件夹拖动到一级文件夹前后
	} else if (dropNode.data.permissionType != '2' && dropNode.level == 1) {
		return type != 'inner'
		//不能拖动到问题内部
	} else if (dropNode.data.type == '2') {
		return type != 'inner';
	} else {
		return true;
	}
},
/**
 * 树节点允许被拖拽事件
 */
allowDrag(draggingNode) {
	return draggingNode.data.permissionType == '2';
},