前言：前段時間負(fù)責(zé)公司的運營管理后臺項目，通過運營后臺的PC端拖拽配置布局，達到App首頁模板的動態(tài)UI界面配置，生成頁面。趁著周末，整理一下當(dāng)時所了解到的拖拽。文章會根據(jù)大家的反饋或者自己學(xué)習(xí)經(jīng)驗的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發(fā)，歡迎點贊關(guān)注或者收藏一波[鞠躬]。

之前在掘金一篇文章里看到這段話:

UI 開發(fā)的三種模式

1.手寫標(biāo)簽和樣式代碼，生成頁面

2.可視化拖拽 UI 組建，生成頁面

3.直接輸入設(shè)計稿，輸出可用頁面

有幸當(dāng)前公司處于UI開發(fā)的第二階段

當(dāng)時開發(fā)參考過的小部分網(wǎng)站，其它參考過的大量網(wǎng)站由于電腦硬盤出現(xiàn)故障丟失了無法恢復(fù)。

以上網(wǎng)站這些不是很重要，真正重要有用的網(wǎng)站鏈接我已經(jīng)幫你篩選整理出來了，并貼在下面的文章里面(分為演示與教程兩類)，點擊相關(guān)鏈接即可進入相關(guān)開發(fā)學(xué)習(xí)。

貼上面網(wǎng)站的原因是我想告訴大家，插件選型之前一定要先整理好自己的需求，根據(jù)需求在網(wǎng)上尋找插件，并且打開控制臺，看看效果是不是你所需要的類型，否則下載到本地后調(diào)試了半天發(fā)現(xiàn)最后不能達到自己想要的效果，這樣既浪費時間又浪費精力，就得不償失了。所以，我之后有時間會整理一套插件選型篩選的思維導(dǎo)圖出來，到時發(fā)到掘金或者個人公眾號，大家一起分享進步。

好了，言歸正傳，我們開始上主菜：

拖拽程度的層次

就我搜索到的資料來看，拖拽的程度是分為三類的，如果你有知道的其它類型，歡迎與我交流分享。

1.視圖上的拖拽

比如這個：

通過定位來改變順序，注意看控制臺的節(jié)點位置，并沒有發(fā)生對應(yīng)的改變。這種拖拽僅僅是視圖交互上的效果，也是最最簡單程度效果的拖拽。

鏈接：

2.視圖與節(jié)點同步變化的拖拽

2-1 JQ-UI

比如這個：

請注意看控制臺的節(jié)點位置，發(fā)生了對應(yīng)的改變。這種拖拽是能達到視圖與節(jié)點的同步變化的效果。

鏈接：

2-2 H5-draggable

比如這個：

h5提供的draggable屬性，請注意看控制臺的節(jié)點位置，也發(fā)生了對應(yīng)的改變。

鏈接：

2-3 JQ-UI與H5-draggable的取舍問題

JQ-UI和H5-draggable屬性都能達到我們想要的效果，那我們應(yīng)該選擇哪個呢？個人而言，最后還是選擇了JQ-UI(當(dāng)然重構(gòu)我們改用了vue)。主要考慮的地方是靈活性，JQ-UI優(yōu)于H5-draggable屬性的地方正是在于靈活性。draggable屬性里面方法封裝的比JQ-UI相對而言比較固定，不好調(diào)整。所以，以我的經(jīng)驗來看，如果你是簡簡簡單的小需求的拖拽，draggable的屬性絕對能夠滿足你；但如果你的拖拽需求比較復(fù)雜，那么我建議你用JQ-UI會比較好點。

3.數(shù)據(jù)，視圖，節(jié)點的三者同步變化

比如：這個

vue插件Vue-Draggable，也是vue相關(guān)拖拽插件中的star最多的，配置項也最豐富的。

鏈接:

教程：github-vue-Sortable(draggable插件是基于sortabl二次封裝的，多看看這篇對使用draggable會有很大的幫助)

項目實踐

重構(gòu)的時候我們是用vue的，選擇了這個draggable插件，后面事實證明也是正確的。"花了比用JQ至少少一半的時間就達到了相同的效果"。畢竟Vue只需要考慮數(shù)據(jù)關(guān)注業(yè)務(wù)流程而不需要考慮節(jié)點的操作問題，這點還是非常不錯的。反正誰用誰知道[吐舌]。好了，我們貼出代碼說明：

// 引入組件

import draggable from 'vuedraggable'

// 拖拽模塊箱子到 => 可整理的箱子/ 垃圾箱子

class="sortable"

v-model="templateJson.child"

// 設(shè)置接收的拖拽

:options="{group:'people'}"

@remove="stop">

:item="item"

:type="templateData.type"

v-for="(item, $index) in templateJson.child"

:key="$index">

垃
圾
箱

v-model="templateJson.child"

:options="{group:'people'}">

class="dragArea"

v-model="moduleJson.child"

:clone="clone"

// 開始拖拽的箱子的options選項配置

:options="{group:{ name:'people', pull:'clone', put:false },sort:false}"

@end="onEnd">

:item="item"

:type="templateData.type"

v-for="(item, $index) in moduleJson.child"

:key="$index">

clone是指復(fù)制，sort：false是指不使用排序。代碼中相關(guān)options屬性的配置說明你可以參考教程中的說明去對應(yīng)了解。我這里就不再重復(fù)贅述了。

一句話總結(jié)

如果是簡單的拖拽，建議用H5的draggable屬性。

如果是復(fù)雜點的拖拽，建議用JQ-UI實現(xiàn)。

如果是數(shù)據(jù)驅(qū)動，用Vue-Draggable插件是很不錯的選擇。

一起交流?

如果你有其它更好的想法想一起交流，請訂閱微信公眾號yhzg_gz(點擊復(fù)制，在微信中添加公眾號粘貼即可)與我聯(lián)系，追求代碼質(zhì)量，高效率編程是我們共同的目標(biāo)。

that's all, 以上就是我目前所有的關(guān)于PC端項目拖拽經(jīng)驗的總結(jié)。覺得對你開發(fā)有幫助的可以點贊收藏一波，如果我哪里寫錯了，希望能指點出來。如果你有更好的想法或者建議，可以提出來與我交流。大家一起進步，共同成長。再次感謝[鞠躬]。

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的vue拖动改变模板_可视化拖拽 UI 布局之拖拽篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。