????????大家好捎谨！我是貓貓锥余，今天是第一次在簡書上寫文章镐依，有點菜褂痰，希望諒解哈哈哈灾炭。
????????本文主要講 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)化载绿，才放到了項目中運用。
? ? ? ? 隱藏卡片：就是把改卡片放入了一個隱藏的塊里油航。
? ? ? ? 展示就到這里了崭庸，這里就重點講解一下思路。
? ? ? ? 首先：如圖1效果所見這里分為四個部分劝堪，左邊冀自，中間，右邊秒啦，還有底部（隱藏的）熬粗，分別為四個數(shù)組去存儲。
????????然后定義一個大數(shù)組余境，各個部分去綁定大數(shù)組的值驻呐，這樣就實現(xiàn)了，如此可繼續(xù)擴(kuò)展芳来，再多幾個可拖拉組件也是這樣的含末，就是再去綁定大數(shù)組的值。（是不是很簡單哈哈哈＜瓷唷）
????????如圖：
? ? ? ? 這里我是存了一個屬性去判斷它的位置佣盒，可以自定義存放的內(nèi)容數(shù)據(jù)
????????如圖：
? ? ? ? 這里每次拖動卡片需要更新屬性(pos)，數(shù)據(jù)才會更新顽聂，放在watch里肥惭。
????????如圖：
????????到這里就告一段落了，我第一次寫文章紊搪，如有不懂蜜葱，建議，請大家多多指點耀石，下面是github上的源碼牵囤，供大家去下載借鑒，希望能幫助大家解決問題滞伟，謝謝大家揭鳞。
????????github：https://github.com/loseChuan/Vue-Study
