Vue 實現選中、拖拽、排序效果，基於 vuedraggable 實現

今天有個朋友說要作個效果：Vue實現拖拽排序，要有 checked，輸出結果是排序後的，要全選，未選中的不能拖動。

其實我以前基於 Sortable 作過一個相似的效果。也給他看過了，沒看太明白，他就本身基於 vuedraggable 實現了一下。

正好有點問題給他解決了一下。廢話很少說，先上最終效果：Vue 拖拽排序效果 測試地址。下面就是最終效果圖。

效果一：實現選中 和 全選效果

就下面這樣，elementUI 官方 Demo。很簡單毫無挑戰呀。

<el-checkbox
    :indeterminate="isIndeterminate"
    v-model="checkAll"
    @change="handleCheckAllChange"
  >所有</el-checkbox
>
<el-checkbox-group
    v-model="checkedCities"
    @change="handleCheckedCitiesChange"
>
    <el-checkbox :class="{'item': checkedCities.find(v=>v==city)}" v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
</el-checkbox-group>

效果二：實現拖拽效果

拖拽效果基於 vuedraggable 實現。

問題

這裏我憑藉個人資深經（踩）驗（坑），先提出幾個可能存在的問題。

1. <el-checkbox-group v-model="checkedCities"> 實現的效果只是記錄選中的項，無排序

2. vue 和 jQuery 作起來最大的區別是什麼？基於以下描述，會出現視圖顯示和數據對不上。

   • vue 經過數據驅動視圖，也能夠理解爲數據改變，視圖自動改變。
   • jQuery 經過改變直接視圖先反饋數據。
   • 基於上面兩點，就能夠看到基本上操做 DOM 的庫，Vue 在使用的時候都有問題。由於他們只操做了 DOM，而 Vue 須要是的你修改數據。

解決方案 & 代碼

1. <el-checkbox-group v-model="checkedCities"> 的問題比較好解決。咱們在數據的時候根據數據源排序一把就 ok。
2. 由於問題是庫只修改 DOM，未修改數據，那麼咱們能夠考慮監聽他的回調事件，而後手動的去修改數據（Sortable 我就這樣作的）。
   Vue.Draggable 的封裝仍是有點東西的，他提供了 :list="cities" 讓你傳入數據源，而後操做的時候替你修改數據。

<el-checkbox
    :indeterminate="isIndeterminate"
    v-model="checkAll"
    @change="handleCheckAllChange"
>所有</el-checkbox>
<el-checkbox-group
    v-model="checkedCities"
    @change="handleCheckedCitiesChange">
  <draggable  draggable=".item" :list="cities">
    <el-checkbox :class="{'item': checkedCities.find(v=>v==city)}" v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
  </draggable>
</el-checkbox-group>

效果三：只有選中的才能拖拽

上面咱們已經實現了拖拽。可是未選中也能拖拽排序就感受怪怪的。
這裏有兩個作法

1. 我是記得有提供這樣的功能，找了找文檔果真有 draggable=".item" ，指定可拖拽元素的 class。
   可是它這個效果很詭異，未選中的的確不能拖動了，可是你也不能拖動已選中的佔據他的位置。
   因此我又加了個處理。我對數據源作了排序，這樣選中和未選中就分堆了。
2. 接下來講第二種方案。那就是在他提供的鉤子函數上去本身判斷當前 DOM 該不應執行拖拽。

總結

1. Vue 的庫在使用中要注意操做元數據，而不是隻修改 DOM。

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。