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

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