Vue 組件 Vue-Draggable 的使用

????????大家好捎谨!我是貓貓锥余,今天是第一次在簡書上寫文章镐依,有點菜褂痰,希望諒解哈哈哈灾炭。

????????本文主要講 Vue-Draggable 的使用和多個模塊拖拉控件的實現(xiàn)坡氯,主要也是因為在網(wǎng)上找的文章可能不適合當(dāng)前項目所需泉瞻,所以就研究了幾天莽囤,突發(fā)奇想咙鞍,我就注冊個賬號發(fā)發(fā)文章跟小伙伴們交流交流~

安裝

? ? ? ? 首先安裝 Vue-Draggable

npm install vue-draggable --save

? ? ? ? 頁面引入該組件

import?draggable?from?"vuedraggable";

? ? ? ? 如圖:

引入組件

使用

????????先上實現(xiàn)的效果圖房官,如圖:

效果圖

? ? ? ? 默認(rèn)顯示卡片,該卡片實現(xiàn)了調(diào)整順序和隱藏卡片的效果续滋。

????????調(diào)整順序:卡片實現(xiàn)可以拖拉效果翰守,之前做完靜態(tài)效果自我感覺很好,數(shù)據(jù)也沒有錯誤疲酌,但放入項目才發(fā)現(xiàn)動態(tài)的數(shù)據(jù)不會隨著拖拉的位置改變蜡峰,例如:圖左1拖拉到圖中1了袁,左2標(biāo)題正常,內(nèi)容顯示左1的數(shù)據(jù)湿颅。所以在此處做了優(yōu)化载绿,才放到了項目中運用。

? ? ? ? 隱藏卡片:就是把改卡片放入了一個隱藏的塊里油航。


默認(rèn)顯示

? ? ? ? 展示就到這里了崭庸,這里就重點講解一下思路。

? ? ? ? 首先:如圖1效果所見這里分為四個部分劝堪,左邊冀自,中間,右邊秒啦,還有底部(隱藏的)熬粗,分別為四個數(shù)組去存儲。

????????然后定義一個大數(shù)組余境,各個部分去綁定大數(shù)組的值驻呐,這樣就實現(xiàn)了,如此可繼續(xù)擴(kuò)展芳来,再多幾個可拖拉組件也是這樣的含末,就是再去綁定大數(shù)組的值。(是不是很簡單哈哈哈<瓷唷)

????????如圖:

存放卡片的數(shù)組
頁面代碼運用

? ? ? ? 這里我是存了一個屬性去判斷它的位置佣盒,可以自定義存放的內(nèi)容數(shù)據(jù)

????????如圖:

? ? ? ? 這里每次拖動卡片需要更新屬性(pos),數(shù)據(jù)才會更新顽聂,放在watch里肥惭。

????????如圖:

????????到這里就告一段落了,我第一次寫文章紊搪,如有不懂蜜葱,建議,請大家多多指點耀石,下面是github上的源碼牵囤,供大家去下載借鑒,希望能幫助大家解決問題滞伟,謝謝大家揭鳞。

????????github:https://github.com/loseChuan/Vue-Study

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市诗良,隨后出現(xiàn)的幾起案子汹桦,更是在濱河造成了極大的恐慌,老刑警劉巖鉴裹,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舞骆,死亡現(xiàn)場離奇詭異钥弯,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)督禽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進(jìn)店門脆霎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人狈惫,你說我怎么就攤上這事睛蛛。” “怎么了胧谈?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵忆肾,是天一觀的道長。 經(jīng)常有香客問我菱肖,道長客冈,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任稳强,我火速辦了婚禮场仲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘退疫。我一直安慰自己渠缕,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布褒繁。 她就那樣靜靜地躺著亦鳞,像睡著了一般。 火紅的嫁衣襯著肌膚如雪棒坏。 梳的紋絲不亂的頭發(fā)上蚜迅,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天,我揣著相機(jī)與錄音俊抵,去河邊找鬼。 笑死坐梯,一個胖子當(dāng)著我的面吹牛徽诲,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吵血,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼谎替,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蹋辅?” 一聲冷哼從身側(cè)響起钱贯,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎侦另,沒想到半個月后秩命,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體尉共,經(jīng)...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年弃锐,在試婚紗的時候發(fā)現(xiàn)自己被綠了袄友。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡霹菊,死狀恐怖剧蚣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情旋廷,我是刑警寧澤鸠按,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站饶碘,受9級特大地震影響目尖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜熊镣,卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一卑雁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧绪囱,春花似錦测蹲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至齿椅,卻和暖如春琉挖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背涣脚。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工示辈, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人遣蚀。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓矾麻,卻偏偏與公主長得像,于是被迫代替她去往敵國和親芭梯。 傳聞我的和親對象是個殘疾皇子险耀,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,691評論 2 361