Ztree实现拖拽功能

树节点设置：

 this.tree = $.fn.zTree.init($("#topologyTree"), {
				async:{
					enable:true 
				},
				edit : {
					enable : true,
					drag : {
						isMove : true, // 打开移动功能，鼠标左键点击后拖拽
						prev : true,
						autoOpenTime : 0
					},
					editNameSelectAll : true,
		 			showRemoveBtn : true,
		 			removeTitle : "删除节点",
		 			renameTitle : "编辑节点名称",
		 			showRenameBtn : true,
				},
				view : {
					selectedMulti : false,
					showIcon : true,// 显示图标
					showLine : true,
					addHoverDom : addHoverDom ,
					removeHoverDom : removeHoverDom 
				},
				data : {
					simpleData : {
						enable : true,
						idKey : 'id',
						pIdKey : 'pId',
						rootPId : 0
					},
					key : {
						name : "text"
					}
				},
				check : {
					enable : false
				},
				callback : {
 	 			   	beforeDrag : beforeDrag,
	 				beforeDrop : beforeDrop,
	 				onDrop : zTreeOnDrop
				}
			}, treeData);

拖拽方法实现：

 
//拖拽之前
 function beforeDrag(treeId, treeNodes) {
  	console.log(treeNodes);
 	if (treeNodes[0].id == "sys_A1") {
 		return false;
 	}
 	return true;
 }
 
 // 拽操作结束之前
 function beforeDrop(treeId, treeNodes, targetNode, moveType) {
 	if (targetNode == null) {
  		return false;
 	}
 	if (targetNode.id == treeNodes[0].id) {
  		return false;
 	}
 	var a_ = targetNode.nodeType != 0 || targetNode.nodeType != 4;
 
 	return a_;
  }
 
 
 // 拖拽操作结束
 function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
 	if (targetNode == null || targetNode.id == treeNodes[0].id) {
 		return;
 	}
 
 	console.log(treeNodes[0].id + " 已移动至:" + targetNode.name + "-"+ targetNode.id + "下");
 	var index_ = layer.load(2);
 	$.ajax({
 		type : "post",
 		url : basePath + '/sncTopology/dragTreeNode',
 		async : true, // 使用同步方式
 		data : JSON.stringify({
 			nodeId : treeNodes[0].id,
 			targetId : targetNode.id,
 			nodeType : treeNodes[0].nodeType
 		}),
 		contentType : "application/json; charset=utf-8",
 		dataType : "json",
 		success : function(data) {
 			console.log(data);
 			if (data != null && data.code == 200) {
 				layer.close(index_);
 			} else {
 				layer.msg(data.msg);
 			}
 		}
 	});
 };

后台逻辑：

@Override
	public ReturnT<String> dragTreeNode(Map<String, Object> requestbody) {
		  Object nodeType = requestbody.get("nodeType");
	        if (nodeType == null) {
	            return new ReturnT<String>(500, "没有节点类型");
	        }
	        Object targetId = requestbody.get("targetId");
	        if (targetId == null) {
	            return new ReturnT<String>(500, "没有目标ID");
	        }
	        Object nodeId = requestbody.get("nodeId");
	        if (nodeId == null) {
	            return new ReturnT<String>(500, "没有节点ID");
	        }

	        int result = 0;
	        SncVisualpanelTree sncVisualpanelTree  = sncVisualpanelTreeMapper.selectById(nodeId.toString());
	        
	        sncVisualpanelTree.setParentid(targetId.toString());
	        result = sncVisualpanelTreeMapper.updateById(sncVisualpanelTree);
	        
	        return result > 0 ? ReturnT.SUCCESS : ReturnT.FAIL;
	}
	

 

来源：CSDN

作者：黄杏波

链接：https://blog.csdn.net/weberhuangxingbo/article/details/103777918