您好,登录后才能下订单哦!
这篇文章主要为大家展示了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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。