資訊專欄INFORMATION COLUMN
摘要：和比起來差別還是挺大的至少能讓別人看得下去了預(yù)覽特性雙擊節(jié)點(diǎn)添加一個(gè)字節(jié)點(diǎn)對(duì)節(jié)點(diǎn)進(jìn)行任意拖拽控制特定節(jié)點(diǎn)是否可拖是否可放置其他節(jié)點(diǎn)增加刪除任意層級(jí)的節(jié)點(diǎn)待添加接口屬性屬性名描述類型默認(rèn)值節(jié)點(diǎn)樹的數(shù)據(jù)新生成的節(jié)點(diǎn)的文本屬性新增節(jié)點(diǎn)判斷哪些
Github: https://github.com/shuiRong/v...
Demo: https://vigilant-curran-d6fec...
和v1.0.0比起來,差別還是挺大的.(至少能讓別人看得下去了)
預(yù)覽:
特性:
雙擊節(jié)點(diǎn)添加一個(gè)字節(jié)點(diǎn)
對(duì)節(jié)點(diǎn)進(jìn)行任意拖拽
控制特定節(jié)點(diǎn)是否可拖、是否可放置其他節(jié)點(diǎn)
增加/刪除 任意層級(jí)的節(jié)點(diǎn)（#待添加）
接口屬性
| 屬性名 | 描述 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| data | 節(jié)點(diǎn)樹的數(shù)據(jù) | Array | －－ |
| defaultText | 新生成的節(jié)點(diǎn)的文本(name屬性) | String | 新增節(jié)點(diǎn) |
| allowDrag | 判斷哪些節(jié)點(diǎn)可以被拖拽（return true表示允許） | Function | ()=>true |
| allowDrop | 判斷哪些節(jié)點(diǎn)可以被塞入其他節(jié)點(diǎn)（return true表示允許） | Function | ()=>true |
方法
| 方法名 | 描述 | 參數(shù) |
|---|---|---|
| current-clicked | 告訴你哪個(gè)節(jié)點(diǎn)被點(diǎn)擊了，這個(gè)節(jié)點(diǎn)所在的組件是哪個(gè) | (model,component) model: 當(dāng)前被點(diǎn)擊節(jié)點(diǎn)的數(shù)據(jù)． component: 當(dāng)前節(jié)點(diǎn)所在的樹組件 |
| drag | 節(jié)點(diǎn)被拖動(dòng)時(shí)觸發(fā)的?drag?事件 | (model,component,e) model: 當(dāng)前被拖動(dòng)節(jié)點(diǎn)的數(shù)據(jù); component: 當(dāng)前被拖動(dòng)節(jié)點(diǎn)所在的樹組件（VNode）; e: 拖拽事件 |
| drag-enter | 當(dāng)被拖動(dòng)節(jié)點(diǎn)進(jìn)入有效的放置目標(biāo)時(shí)，?dragenter?事件被觸發(fā) | (model,component,e) model: 有效放置目標(biāo)節(jié)點(diǎn)的數(shù)據(jù); component: 有效放置目標(biāo)節(jié)點(diǎn)所在的樹組件（VNode）; e: 拖拽事件 |
| drag-leave | 當(dāng)被拖動(dòng)節(jié)點(diǎn)離開有效的放置目標(biāo)時(shí)，?dragleave?事件被觸發(fā) | (model,component,e) model: 有效放置目標(biāo)節(jié)點(diǎn)的數(shù)據(jù); component: 有效放置目標(biāo)節(jié)點(diǎn)所在的樹組件（VNode）; e: 拖拽事件 |
| drag-over | 當(dāng)節(jié)點(diǎn)被拖拽到一個(gè)有效的放置目標(biāo)上時(shí)，觸發(fā)?dragover?事件 | (model,component,e) model: 有效放置目標(biāo)節(jié)點(diǎn)的數(shù)據(jù); component: 有效放置目標(biāo)節(jié)點(diǎn)所在的樹組件（VNode）; e: 拖拽事件 |
| drag-end | 拖放事件在拖放操作結(jié)束時(shí)觸發(fā) | (model,component,e) model: 當(dāng)前被拖動(dòng)節(jié)點(diǎn)的數(shù)據(jù); component: 當(dāng)前被拖動(dòng)節(jié)點(diǎn)所在的樹組件（VNode）; e: 拖拽事件 |
| drop | 當(dāng)節(jié)點(diǎn)被放置到一個(gè)有效的防止目標(biāo)上時(shí)，drop被觸發(fā) | (model,component,e) model: 當(dāng)前被拖動(dòng)節(jié)點(diǎn)的數(shù)據(jù); component: 當(dāng)前被拖動(dòng)節(jié)點(diǎn)所在的樹組件（VNode）; e: 拖拽事件 |
License
MIT
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83765.html
摘要：和比起來差別還是挺大的至少能讓別人看得下去了預(yù)覽特性雙擊節(jié)點(diǎn)添加一個(gè)字節(jié)點(diǎn)對(duì)節(jié)點(diǎn)進(jìn)行任意拖拽控制特定節(jié)點(diǎn)是否可拖是否可放置其他節(jié)點(diǎn)增加刪除任意層級(jí)的節(jié)點(diǎn)待添加接口屬性屬性名描述類型默認(rèn)值節(jié)點(diǎn)樹的數(shù)據(jù)新生成的節(jié)點(diǎn)的文本屬性新增節(jié)點(diǎn)判斷哪些 Github: https://github.com/shuiRong/v...Demo: https://vigilant-curran-d6fec...
摘要：前端日?qǐng)?bào)精選譯，和的未來學(xué)習(xí)筆記箭頭函數(shù)學(xué)習(xí)筆記教程?hào)鸥癫季志硗林貋恚眠€是為什么我會(huì)選擇而不是眾成翻譯原生開發(fā)入門完全教程從零到壹全棧部落中文一個(gè)端帶文件路徑和顏色的攻城方略譯使用提高應(yīng)用程序的種方式中自定義操作符修仙 2017-07-02 前端日?qǐng)?bào) 精選 [譯] TC39，ECMAScript 和 JavaScript 的未來（Part 1）ES6學(xué)習(xí)筆記：箭頭函數(shù)_ES6, Ja...
效果展示： 點(diǎn)擊即可隨意調(diào)節(jié)菜單寬度 變動(dòng)后 頁面結(jié)構(gòu)一共分為三部分，加上一個(gè)伸縮按鈕，在你的項(xiàng)目對(duì)應(yīng)的部分都加上class名。 我這里定義的分別是box、left、mid、resize(按鈕類名) html 頁面結(jié)構(gòu)劃分完成之后，完善一下樣式（直接復(fù)制，菜單類名換成你的） /*拖拽區(qū)div樣式*/ .resize{ cursor:col-resize; positi...
閱讀 3662·2021-10-11 10:58
閱讀 2252·2021-10-08 10:05
閱讀 2034·2021-09-27 13:34
閱讀 3576·2019-08-30 15:53
閱讀 2734·2019-08-30 14:02
閱讀 3562·2019-08-29 16:55
閱讀 623·2019-08-29 15:41
閱讀 1071·2019-08-29 15:23
