您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了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 實現。
問題
這里我憑借我的資深經(踩)驗(坑),先提出幾個可能存在的問題。
<el-checkbox-group v-model="checkedCities">
實現的效果只是記錄選中的項,無排序vue 通過數據驅動視圖,也可以理解為數據改變,視圖自動改變。
jQuery 通過改變直接視圖先反饋數據。
基于上面兩點,就可以看到基本上操作 DOM 的庫,Vue 在使用的時候都有問題。
因為他們只操作了 DOM,而 Vue 需要是的你修改數據。
解決方案 & 代碼
<el-checkbox-group v-model="checkedCities">
的問題比較好解決。我們在數據的時候根據數據源排序一把就 ok。
因為問題是庫只修改 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>
效果三:只有選中的才能拖拽
上面我們已經實現了拖拽。但是未選中也能拖拽排序就感覺怪怪的。
這里有兩個做法
draggable=".item"
,指定可拖拽元素的 class。DOM
該不該執行拖拽。Vue 的庫在使用中要注意操作元數據,而不是只修改 DOM。
ps:下面在看下vue + vuedraggable 實現拖拽排序
安裝
npm install vuedraggable
引入
import draggable from 'vuedraggable'
注冊
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" /> <h4>{{item.text}}</h4> </div> </li> </transition-group> </draggable>
以上就是關于Vue基于vuedraggable如何實現選中、拖拽、排序效果的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。