vue ztree实现拖拽
实现 Vue 中 ZTree 的拖拽功能
在 Vue 项目中实现 ZTree 的拖拽功能，通常需要结合 jQuery 的 ZTree 插件。以下是具体实现方法：
安装依赖
确保项目中已引入 jQuery 和 ZTree 相关资源：
npm install jquery ztree或在 HTML 中直接引入 CDN 链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/css/zTreeStyle/zTreeStyle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/js/jquery.ztree.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/js/jquery.ztree.exedit.min.js"></script>初始化 ZTree 配置
在 Vue 组件的 mounted 钩子中初始化 ZTree，并启用拖拽功能：
mounted() {
const setting = {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
view: {
selectedMulti: false
},
callback: {
beforeDrop: this.beforeDrop,
onDrop: this.onDrop
}
};
const zNodes = [
{ id: 1, pId: 0, name: "父节点1", open: true },
{ id: 11, pId: 1, name: "子节点1" },
{ id: 12, pId: 1, name: "子节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}处理拖拽事件
实现拖拽前后的回调函数：
methods: {
beforeDrop(treeId, treeNodes, targetNode, moveType) {
// 返回 true 允许拖拽，false 禁止拖拽
return true;
},
onDrop(event, treeId, treeNodes, targetNode, moveType) {
// 拖拽完成后的逻辑
console.log("拖拽完成", treeNodes);
}
}模板结构
在 Vue 模板中添加 ZTree 容器：
<template>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</template>样式调整
确保 ZTree 容器有明确的高度：
.ztree {
height: 400px;
overflow-y: scroll;
}注意事项
- 拖拽功能依赖
jquery.ztree.exedit.min.js，必须引入该文件。 - 若拖拽无效，检查是否设置了
edit.enable: true。 - 可通过
setting.edit.drag配置拖拽范围（如{ inner: true }限制同级拖拽）。
通过以上步骤，即可在 Vue 中实现 ZTree 的节点拖拽功能。
