本文主要是介绍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=truet = $.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// }}//用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作//默认值 nullfunction beforeDrop(treeId, treeNodes, targetNode, moveType) {}//用于捕获节点拖拽操作结束的事件回调函数 默认值： nullfunction 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) {}
这篇关于zTree做拖拽移动功能，并保存数据到数据库的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
