我完善了下这个"支持拖拽"的树组件(Vue2.x)

darryrzhong 发布于2019-08-20 17:40 / 3099人阅读

摘要：和比起来差别还是挺大的至少能让别人看得下去了预览特性双击节点添加一个字节点对节点进行任意拖拽控制特定节点是否可拖是否可放置其他节点增加删除任意层级的节点待添加接口属性属性名描述类型默认值节点树的数据新生成的节点的文本属性新增节点判断哪些

Github: https://github.com/shuiRong/v...
Demo: https://vigilant-curran-d6fec...

和v1.0.0比起来,差别还是挺大的.(至少能让别人看得下去了)

预览:

特性:

双击节点添加一个字节点

对节点进行任意拖拽

控制特定节点是否可拖、是否可放置其他节点

增加/删除 任意层级的节点（#待添加）

接口

属性

属性名	描述	类型	默认值
data	节点树的数据	Array	－－
defaultText	新生成的节点的文本(name属性)	String	新增节点
allowDrag	判断哪些节点可以被拖拽（return true表示允许）	Function	()=>true
allowDrop	判断哪些节点可以被塞入其他节点（return true表示允许）	Function	()=>true

方法

方法名	描述	参数
current-clicked	告诉你哪个节点被点击了，这个节点所在的组件是哪个	(model,component) model: 当前被点击节点的数据． component: 当前节点所在的树组件
drag	节点被拖动时触发的 drag 事件	(model,component,e) model: 当前被拖动节点的数据; component: 当前被拖动节点所在的树组件（VNode）; e: 拖拽事件
drag-enter	当被拖动节点进入有效的放置目标时， dragenter 事件被触发	(model,component,e) model: 有效放置目标节点的数据; component: 有效放置目标节点所在的树组件（VNode）; e: 拖拽事件
drag-leave	当被拖动节点离开有效的放置目标时， dragleave 事件被触发	(model,component,e) model: 有效放置目标节点的数据; component: 有效放置目标节点所在的树组件（VNode）; e: 拖拽事件
drag-over	当节点被拖拽到一个有效的放置目标上时，触发 dragover 事件	(model,component,e) model: 有效放置目标节点的数据; component: 有效放置目标节点所在的树组件（VNode）; e: 拖拽事件
drag-end	拖放事件在拖放操作结束时触发	(model,component,e) model: 当前被拖动节点的数据; component: 当前被拖动节点所在的树组件（VNode）; e: 拖拽事件
drop	当节点被放置到一个有效的防止目标上时，drop被触发	(model,component,e) model: 当前被拖动节点的数据; component: 当前被拖动节点所在的树组件（VNode）; e: 拖拽事件

License

MIT

云服务器 GPU云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83765.html

我完善了下这个&quot;支持拖拽&quot;的树组件(Vue2.x)

摘要：和比起来差别还是挺大的至少能让别人看得下去了预览特性双击节点添加一个字节点对节点进行任意拖拽控制特定节点是否可拖是否可放置其他节点增加删除任意层级的节点待添加接口属性属性名描述类型默认值节点树的数据新生成的节点的文本属性新增节点判断哪些 Github: https://github.com/shuiRong/v...Demo: https://vigilant-curran-d6fec...

Alfred 2019-08-29 12:52 评论0 收藏0
2017-07-02 前端日报

摘要：前端日报精选译，和的未来学习笔记箭头函数学习笔记教程栅格布局卷土重来，用还是为什么我会选择而不是众成翻译原生开发入门完全教程从零到壹全栈部落中文一个端带文件路径和颜色的攻城方略译使用提高应用程序的种方式中自定义操作符修仙 2017-07-02 前端日报精选 [译] TC39，ECMAScript 和 JavaScript 的未来（Part 1）ES6学习笔记：箭头函数_ES6, Ja...

lemon 2019-08-20 17:42 评论0 收藏0
vue实现伸缩菜单功能

　　效果展示：　　点击即可随意调节菜单宽度　　变动后　　页面结构一共分为三部分，加上一个伸缩按钮，在你的项目对应的部分都加上class名。　　我这里定义的分别是box、left、mid、resize(按钮类名)　　html　　页面结构划分完成之后，完善一下样式（直接复制，菜单类名换成你的）　　/*拖拽区div样式*/ 　　.resize{ 　　cursor:col-resize; 　　positi...

3403771864 2022-09-12 20:06 评论0 收藏0