前言：前段時間負責公司的運營管理後臺專案，通過運營後臺的PC端拖拽配置佈局，達到App首頁模板的動態UI介面配置，生成頁面。趁著週末，整理一下當時所瞭解到的拖拽。文章會根據大家的反饋或者自己學習經驗的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發，歡迎點贊關注或者收藏一波[鞠躬]。
之前在掘金一篇文章裡看到這段話:
UI 開發的三種模式
1.手寫標籤和樣式程式碼，生成頁面
2.視覺化拖拽 UI 組建，生成頁面
3.直接輸入設計稿，輸出可用頁面
有幸當前公司處於UI開發的第二階段
當時開發參考過的小部分網站，其它參考過的大量網站由於電腦硬碟出現故障丟失了無法恢復。
以上網站這些不是很重要，真正重要有用的網站連結我已經幫你篩選整理出來了，並貼在下面的文章裡面(分為演示與教程兩類)，點選相關連結即可進入相關開發學習。
貼上面網站的原因是我想告訴大家，外掛選型之前一定要先整理好自己的需求，根據需求在網上尋找外掛，並且開啟控制檯，看看效果是不是你所需要的型別，否則下載到本地後除錯了半天發現最後不能達到自己想要的效果，這樣既浪費時間又浪費精力，就得不償失了。所以，我之後有時間會整理一套外掛選型篩選的思維導圖出來，到時發到掘金或者個人公眾號，大家一起分享進步。
好了，言歸正傳，我們開始上主菜：
拖拽程度的層次
就我搜尋到的資料來看，拖拽的程度是分為三類的，如果你有知道的其它型別，歡迎與我交流分享。
1.檢視上的拖拽
比如這個：
通過定位來改變順序，注意看控制檯的節點位置，並沒有發生對應的改變。這種拖拽僅僅是檢視互動上的效果，也是最最簡單程度效果的拖拽。
連結：
2.檢視與節點同步變化的拖拽
2-1 JQ-UI
比如這個：
請注意看控制檯的節點位置，發生了對應的改變。這種拖拽是能達到檢視與節點的同步變化的效果。
連結：
2-2 H5-draggable
比如這個：
h5提供的draggable屬性，請注意看控制檯的節點位置，也發生了對應的改變。
連結：
2-3 JQ-UI與H5-draggable的取捨問題
JQ-UI和H5-draggable屬性都能達到我們想要的效果，那我們應該選擇哪個呢？個人而言，最後還是選擇了JQ-UI(當然重構我們改用了vue)。主要考慮的地方是靈活性，JQ-UI優於H5-draggable屬性的地方正是在於靈活性。draggable屬性裡面方法封裝的比JQ-UI相對而言比較固定，不好調整。所以，以我的經驗來看，如果你是簡簡簡單的小需求的拖拽，draggable的屬性絕對能夠滿足你；但如果你的拖拽需求比較複雜，那麼我建議你用JQ-UI會比較好點。
3.資料，檢視，節點的三者同步變化
比如：這個
vue外掛Vue-Draggable，也是vue相關拖拽外掛中的star最多的，配置項也最豐富的。
連結:
教程：github-vue-Sortable(draggable外掛是基於sortabl二次封裝的，多看看這篇對使用draggable會有很大的幫助)
專案實踐
重構的時候我們是用vue的，選擇了這個draggable外掛，後面事實證明也是正確的。"花了比用JQ至少少一半的時間就達到了相同的效果"。畢竟Vue只需要考慮資料關注業務流程而不需要考慮節點的操作問題，這點還是非常不錯的。反正誰用誰知道[吐舌]。好了，我們貼出程式碼說明：
// 引入元件
import draggable from 'vuedraggable'
// 拖拽模組箱子到 => 可整理的箱子/ 垃圾箱子
<!--可整理的箱子-->
<div id="sortable" class='block'>
<draggable
class="sortable"
v-model="templateJson.child"
// 設定接收的拖拽
:options="{group:'people'}"
@remove="stop">
<module-template
:item="item"
:type="templateData.type"
v-for="(item, $index) in templateJson.child"
:key="$index">
</module-template>
</draggable>
</div>
<!--垃圾箱子-->
<div id="dusbtin">
<br/>垃<br/>圾<br/>箱
<draggable
v-model="templateJson.child"
:options="{group:'people'}">
<div class="btn"></div>
</draggable>
</div>
<!--模組箱子-->
<div id="module">
<draggable
class="dragArea"
v-model="moduleJson.child"
:clone="clone"
// 開始拖拽的箱子的options選項配置
:options="{group:{ name:'people', pull:'clone', put:false },sort:false}"
@end="onEnd">
<module-template
:item="item"
:type="templateData.type"
v-for="(item, $index) in moduleJson.child"
:key="$index">
</module-template>
</draggable>
</div>
複製程式碼clone是指複製，sort：false是指不使用排序。程式碼中相關options屬性的配置說明你可以參考教程中的說明去對應瞭解。我這裡就不再重複贅述了。
一句話總結
如果是簡單的拖拽，建議用H5的draggable屬性。
如果是複雜點的拖拽，建議用JQ-UI實現。
如果是資料驅動，用Vue-Draggable外掛是很不錯的選擇。
that's all, 以上就是我目前所有的關於PC端專案拖拽經驗的總結。覺得對你開發有幫助的可以點贊收藏一波，如果我哪裡寫錯了，希望能指點出來。如果你有更好的想法或者建議，可以提出來與我交流。大家一起進步，共同成長。感謝[鞠躬]。
一起交流?
你有好的想法可以一起交流，訂閱微信公眾號yhzg_gz(點選複製，在微信中新增公眾號貼上即可)，追求程式碼質量，高效率程式設計是我們共同的目標。
