vue ztree实现拖拽
实现 Vue 中 ZTree 拖拽功能
在 Vue 项目中实现 ZTree 的拖拽功能，需要结合 jQuery ZTree 插件。以下是具体实现步骤：
安装依赖
确保项目中已引入 jQuery 和 zTree 相关文件。可以通过 npm 安装或直接引入 CDN：
npm install jquery ztree基本配置
在 Vue 组件中引入 zTree 并初始化配置：
import $ from 'jquery';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import 'ztree/js/jquery.ztree.core';
import 'ztree/js/jquery.ztree.exedit'; // 拖拽功能需要此模块初始化 ZTree
在 Vue 的 mounted 钩子中初始化 ZTree：
mounted() {
this.initZTree();
},
methods: {
initZTree() {
const setting = {
edit: {
enable: true,
showRemoveBtn: true,
showRenameBtn: true,
drag: {
isCopy: false,
isMove: true
}
},
callback: {
beforeDrag: this.beforeDrag,
beforeDrop: this.beforeDrop,
onDrop: this.onDrop
}
};
const zNodes = [
{ id: 1, pId: 0, name: "父节点1" },
{ id: 2, pId: 1, name: "子节点1" },
{ id: 3, pId: 1, name: "子节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
}拖拽回调方法
实现拖拽过程中的回调函数：
methods: {
beforeDrag(treeId, treeNodes) {
// 返回 false 可禁止拖拽
return true;
},
beforeDrop(treeId, targetNode, sourceNode, isMove) {
// 返回 false 可禁止放置
return true;
},
onDrop(event, treeId, targetNode, sourceNode, isMove) {
// 拖拽完成后的处理逻辑
console.log('拖拽完成', sourceNode, targetNode);
}
}模板结构
在模板中添加容器元素：
<template>
<div id="treeDemo" class="ztree"></div>
</template>样式调整
确保为 zTree 容器设置合适的高度：
.ztree {
height: 400px;
overflow-y: scroll;
}注意事项
- 确保 jQuery 在全局可用（可通过
window.$ = $设置） - 拖拽功能需要引入
jquery.ztree.exedit.js模块 - 可以通过
setting.edit.drag配置拖拽行为（如是否允许复制节点）
高级配置
如需更复杂的拖拽控制，可以配置以下参数：
drag: {
prev: true, // 允许拖拽到目标节点前
inner: true, // 允许拖拽到目标节点内
next: true, // 允许拖拽到目标节点后
isCopy: false // 禁止复制节点
}通过以上步骤，可以在 Vue 项目中实现 ZTree 的完整拖拽功能。根据实际需求调整回调函数和配置参数即可满足不同的业务场景。
