我完善了下這個"支持拖拽"的樹組件(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