可視化拖拽 UI 佈局之拖拽篇

前言：前段時間負責公司的運營管理後臺項目，經過運營後臺的PC端拖拽配置佈局，達到App首頁模板的動態UI界面配置，生成頁面。趁着週末，整理一下當時所瞭解到的拖拽。文章會根據你們的反饋或者本身學習經驗的累積成長不按期更新豐富。若是你想了解更多PC端的拖拽開發，歡迎點贊關注或者收藏一波[鞠躬]。

以前在掘金一篇文章裏看到這段話:

UI 開發的三種模式

1.手寫標籤和樣式代碼，生成頁面

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

3.直接輸入設計稿，輸出可用頁面

有幸當前公司處於UI開發的第二階段

當時開發參考過的小部分網站，其它參考過的大量網站因爲電腦硬盤出現故障丟失了沒法恢復。

以上網站這些不是很重要，真正重要有用的網站連接我已經幫你篩選整理出來了，並貼在下面的文章裏面(分爲演示與教程兩類)，點擊相關連接便可進入相關開發學習。

貼上面網站的緣由是我想告訴你們，插件選型以前必定要先整理好本身的需求，根據需求在網上尋找插件，而且打開控制檯，看看效果是否是你所須要的類型，不然下載到本地後調試了半天發現最後不能達到本身想要的效果，這樣既浪費時間又浪費精力，就得不償失了。因此，我以後有時間會整理一套插件選型篩選的思惟導圖出來，到時發到掘金或者我的公衆號，你們一塊兒分享進步。

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

拖拽程度的層次

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

1.視圖上的拖拽

好比這個：

經過定位來改變順序，注意看控制檯的節點位置，並無發生對應的改變。這種拖拽僅僅是視圖交互上的效果，也是最最簡單程度效果的拖拽。

連接：

JS-Demo演示地址

2.視圖與節點同步變化的拖拽

2-1 JQ-UI

好比這個：

請注意看控制檯的節點位置，發生了對應的改變。這種拖拽是能達到視圖與節點的同步變化的效果。

連接：

演示：JQ-UI-Demo演示地址

教程：JQ-UI中文API文檔教程

2-2 H5-draggable

好比這個：

h5提供的draggable屬性，請注意看控制檯的節點位置，也發生了對應的改變。

連接：

演示：Demo演示地址

教程：張鑫旭-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最多的，配置項也最豐富的。

連接:

演示：Demo演示地址

教程：github-vue-draggable

教程：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(點擊複製，在微信中添加公衆號粘貼便可)，追求代碼質量，高效率編程是咱們共同的目標。

寫文章能夠得異步社區的書！愛讀書的技術人都在異步社區。我想要讀CSS世界，但願你也可以喜歡。參與寫做換書活動。