我完善了下這個"支持拖拽"的樹組件(Vue2.x)

darryrzhong 發布于2019-08-20 17:40 / 3123人閱讀

摘要：和比起來差別還是挺大的至少能讓別人看得下去了預覽特性雙擊節點添加一個字節點對節點進行任意拖拽控制特定節點是否可拖是否可放置其他節點增加刪除任意層級的節點待添加接口屬性屬性名描述類型默認值節點樹的數據新生成的節點的文本屬性新增節點判斷哪些

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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