快捷導(dǎo)航

Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果

更新時(shí)間：2022年05月21日 10:34:59 作者：linong

這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

今天有個(gè)朋友說(shuō)要做個(gè)效果：Vue實(shí)現(xiàn)拖拽排序，要有 checked，輸出結(jié)果是排序后的，要全選，未選中的不能拖動(dòng)。

其實(shí)我之前基于 Sortable 做過(guò)一個(gè)類似的效果。也給他看過(guò)了，沒(méi)看太明白，他就自己基于 vuedraggable 實(shí)現(xiàn)了一下。

正好有點(diǎn)問(wèn)題給他解決了一下。廢話不多說(shuō)，先上最終效果：Vue 拖拽排序效果測(cè)試地址。下面就是最終效果圖。

效果一：實(shí)現(xiàn)選中和全選效果

就下面這樣，elementUI 官方 Demo。很簡(jiǎn)單毫無(wú)挑戰(zhàn)呀。

<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>

效果二：實(shí)現(xiàn)拖拽效果

拖拽效果基于 vuedraggable 實(shí)現(xiàn)。

問(wèn)題

這里我憑借我的資深經(jīng)（踩）驗(yàn)（坑），先提出幾個(gè)可能存在的問(wèn)題。

<el-checkbox-group v-model="checkedCities"> 實(shí)現(xiàn)的效果只是記錄選中的項(xiàng)，無(wú)排序
vue 和 jQuery 做起來(lái)最大的區(qū)別是什么？基于如下描述，會(huì)出現(xiàn)視圖顯示和數(shù)據(jù)對(duì)不上。

vue 通過(guò)數(shù)據(jù)驅(qū)動(dòng)視圖，也可以理解為數(shù)據(jù)改變，視圖自動(dòng)改變。

jQuery 通過(guò)改變直接視圖先反饋數(shù)據(jù)。

基于上面兩點(diǎn)，就可以看到基本上操作 DOM 的庫(kù)，Vue 在使用的時(shí)候都有問(wèn)題。

因?yàn)樗麄冎徊僮髁?DOM，而 Vue 需要是的你修改數(shù)據(jù)。

解決方案 & 代碼

<el-checkbox-group v-model="checkedCities"> 的問(wèn)題比較好解決。我們?cè)跀?shù)據(jù)的時(shí)候根據(jù)數(shù)據(jù)源排序一把就 ok。

因?yàn)閱?wèn)題是庫(kù)只修改 DOM，未修改數(shù)據(jù)，那么我們可以考慮監(jiān)聽(tīng)他的回調(diào)事件，然后手動(dòng)的去修改數(shù)據(jù)（Sortable 我就這樣做的）。
Vue.Draggable 的封裝還是有點(diǎn)東西的，他提供了 :list="cities" 讓你傳入數(shù)據(jù)源，然后操作的時(shí)候替你修改數(shù)據(jù)。

<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>

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

上面我們已經(jīng)實(shí)現(xiàn)了拖拽。但是未選中也能拖拽排序就感覺(jué)怪怪的。
這里有兩個(gè)做法

我是記得有提供這樣的功能，找了找文檔果然有 draggable=".item" ，指定可拖拽元素的 class。
但是它這個(gè)效果很詭異，未選中的的確不能拖動(dòng)了，但是你也不能拖動(dòng)已選中的占據(jù)他的位置。
所以我又加了個(gè)處理。我對(duì)數(shù)據(jù)源做了排序，這樣選中和未選中就分堆了。
接下來(lái)說(shuō)第二種方案。那就是在他提供的鉤子函數(shù)上去自己判斷當(dāng)前 DOM 該不該執(zhí)行拖拽。

Vue 的庫(kù)在使用中要注意操作元數(shù)據(jù)，而不是只修改 DOM。

ps：下面在看下vue + vuedraggable 實(shí)現(xiàn)拖拽排序

安裝

npm install vuedraggable

引入

import draggable from 'vuedraggable'

注冊(cè)

components: {
 draggable
}

html

<draggable
 class="list"
 v-model="modules"
 :clone="clone"
 :options="{
 group: {
  name: 'layout',
  pull: 'clone',
  put: false
 },
 draggable: '.item',
 forceFallback: true,
 sort: false,
 animation: 50
 }">
 <transition-group tag="ul">
 <li
  v-for="(item, index) in modules"
  :key="index"
  class="item">
  <div class="holder">
  <img :src="item.icon" />
  <h3>{{item.text}}</h3>
  </div>
 </li>
 </transition-group>
</draggable>

Github：https://github.com/SortableJS/Vue.Draggable

Demo：https://david-desmaisons.github.io/draggable-example/

到此這篇關(guān)于Vue 基于 vuedraggable 實(shí)現(xiàn)選中、拖拽、排序效果的文章就介紹到這了,更多相關(guān)vue vuedraggable實(shí)現(xiàn)選中、拖拽、排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: