資訊專欄INFORMATION COLUMN
摘要：項目需要做到圖片拖拽的效果，找到了這個組件，送上地址，并且記錄如下。想要的效果是能做到同級拖拽排序以及跨層拖拽從一個列表到另一個列表。最簡單的效果就有了，動畫就要根據(jù)各自的需求去探索了。
項目需要做到圖片拖拽的效果，找到了這個組件，送上GitHub地址，并且記錄如下。
想要的效果是能做到同級拖拽（排序）以及跨層拖拽（從一個列表到另一個列表）。
1、需要安裝依賴
npm install vuedraggable --save
如果不行，可以借助淘寶鏡像，用cnpm install vuedraggable --save
2、引入依賴
在需要的文件夾下引入import draggable from "vuedraggable";
3、調(diào)用組件
components: {
//調(diào)用組件
draggable,
},
4、使用組件
版本2指出用v-bind代替原本的:options，用tag代替原本的element。
注：transition-group必須是draggable的下面一層，兩個必須緊挨著，不然拖拽的時候會出現(xiàn)整個數(shù)組被拖拽的現(xiàn)象，而不是單條數(shù)據(jù)；transition-group下面一層必須是v-for的內(nèi)容，不能額外再加div；樣式效果最好在div上寫，不要在draggable和transition-group上寫，很多效果都不能實現(xiàn)。
最簡單的效果就有了，動畫就要根據(jù)各自的需求去探索了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105721.html
前言：前段時間負(fù)責(zé)公司的運(yùn)營管理后臺項目，通過運(yùn)營后臺的PC端拖拽配置布局，達(dá)到App首頁模板的動態(tài)UI界面配置，生成頁面。趁著周末，整理一下當(dāng)時所了解到的拖拽。文章會根據(jù)大家的反饋或者自己學(xué)習(xí)經(jīng)驗的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發(fā)，歡迎點(diǎn)贊關(guān)注或者收藏一波[鞠躬]。 之前在掘金一篇文章里看到這段話: UI 開發(fā)的三種模式 1.手寫標(biāo)簽和樣式代碼，生成頁面 2.可視化拖拽 ...
摘要：全家桶仿騰訊體育一年一度的總決賽，相信球迷用的最多的就是騰訊體育這款，剛好上手，當(dāng)練手就把這個仿下來。這樣剛進(jìn)去的時候頁面加載時間明顯減短?？梢园我猱惒讲僮鳌? Vue2.0全家桶仿騰訊體育APP 一年一度的NBA總決賽，相信球迷用的最多的就是騰訊體育這款A(yù)PP，剛好上手Vue，當(dāng)練手就把這個APP仿下來。 showImg(https://segmentfault.com/img/r...
摘要：此文研究中的拖放接口，提供各個屬性和方法的說明，解決拖放過程中的拖拽數(shù)據(jù)對象存儲和獲取問題。方法增加一個拖拽數(shù)據(jù)對象到屬性中，并返回增加的拖拽數(shù)據(jù)對象。若拖拽數(shù)據(jù)對象是文本字符串類型，通過回調(diào)函數(shù)獲取拖拽數(shù)據(jù)中的字符串?dāng)?shù)據(jù)。 此文研究Web API中的拖放接口，提供各個屬性和方法的說明，解決拖放過程中的拖拽數(shù)據(jù)對象存儲和獲取問題。 拖放API作用到兩個目標(biāo)對象，分別是拖拽目標(biāo)對象和放置...
閱讀 1049·2021-11-04 16:08
閱讀 3031·2021-09-13 10:37
閱讀 553·2019-08-30 15:56
閱讀 2082·2019-08-30 15:55
閱讀 2282·2019-08-30 15:53
閱讀 2140·2019-08-30 13:13
閱讀 2985·2019-08-30 12:51
閱讀 1586·2019-08-29 16:06
