zTree做拖拽移动功能，并保存数据到数据库

思路：zTree的拖拽移动功能是组件自带的，通过setting配置即可，保存到数据库则需要拿到移动节点id和目标父级id，后端去处理，把移动节点的数据挂到目标父级的下面。
这里只介绍前端处理

html：

<div class="container-div ui-layout-center" style="background:#fff">
	<div id="tree" class="ztree"></div>
	<div style="position:absolute;left:400px;top:30px;">
		<div>移动节点：<span id="ydjd"></span></div>
		<div>移动节点id：<span id="ydjd2"></span></div>
		<br/>
		<div>目标父级：<span id="mbfj"></span></div>
		<div>目标父级id：<span id="mbfj2"></span></div>
	</div>

</div>

script：

//先引入指定目录下的这三个js
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.core-3.5.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.excheck-3.5.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.exedit-3.5.js}"></script>


	var setting = {
		edit: {
			enable: true,
			showRemoveBtn: true,
			showRenameBtn: true,
			drag: {
				isCopy: false,
				isMove: true,
				prev: true,
				next: true,
				inner: true
			}
		},
		data: {
			key:{
				name:"name"
			},
			simpleData: {
				enable: true,
				idKey:"id",
				pIdKey:"pId",
				rootPid: "0"
			}
		},
		callback: {
			beforeDrag: beforeDrag,
			beforeDrop: beforeDrop,
			onDrop: onDrop,
			beforeRemove: beforeRemove,
			beforeRename: beforeRename,
			onRemove: onRemove,
			onRename: onRename
		}
	};

	var zNodes =[] ,
	//获取树数据接口
	$.ajax({
		url: ctx + "system/dept/currentTreeData",
		type: "get",
		async: false,
		success: function (res) {
			zNodes = res;
			zNodes[0].open=true
			t = $.fn.zTree.init($("#tree"), setting, zNodes)
		}
	})
	//在拖拽之前  可以用来做是否可拖拽限制
	function beforeDrag(treeId, treeNodes) {
	    console.log('beforeDrag',treeNodes[0].title,treeId, treeNodes)
		$('#ydjd').html(treeNodes[0].title)
		$('#ydjd2').html(treeNodes[0].id)
		// if(treeNodes[0].isleaf == true){ //叶子节点
		// 	return false
		// }else{
		// 	return true
		// }
	
	}
	//用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
	//默认值 null
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {

	}
	//用于捕获节点拖拽操作结束的事件回调函数  默认值： null
	function onDrop(event, treeId, treeNodes, targetNode,moveType) {
		console.log(targetNode.title,event, treeId, treeNodes, targetNode,moveType)

		$('#mbfj').html(targetNode.title)
		$('#mbfj2').html(targetNode.id)
	
	}

	//删除节点之前执行的函数
	function beforeRemove(treeId, treeNode) {
	
	//删除节点执行的函数
	function onRemove(e, treeId, treeNode) {

	}
	//重命名之前执行的函数
	function beforeRename(treeId, treeNode, newName, isCancel) {
		
	}
	//重命名是执行的函数
	function onRename(e, treeId, treeNode, isCancel) {

	}