简单介绍
在项目中我个人使用了slicksort和draggable这两个拖拽插件,在这里总结一下slicksort插件的优点,最大的特点个人觉得是很滑(都叫slick sort 翻译过来就是光滑排序)。但在使用该拖拽前,必须先看一下slicksort的demo,看是否满足你个人的需求,毕竟有些需求在slicksort中是不好实现的(如:跨组拖拽,就得用draggable比较好处理)
相关连接
GitHub地址:官方文档
演示地址:查看demo
中文文档:开发文档
安装
通过npm安装
$ npm install vue-slicksort --save
通过yarn安装
$ yarn add vue-slicksort
简单应用
具体文档请点击查看这里就不贴过来了
<template>
<div>
<SlickList :lockToContainerEdges="true"
lockAxis="y"
v-model="items"
helperClass="project_state"
:hideSortableGhost='true'
@sort-start="moveStart"
@sort-move="onMove"
@sort-end="moveEnd"
@input="getChangeList"
>
<SlickItem v-for="(item,index) in items" :index="index" :key="item" >
<div class="s-flex">
<div></div>
<i class="el-edit_icon" @mousedown.stop="" @mouseup="editFunc"></i>
<i class="el-icon-close" @mousedown.stop="" @mouseup="deleteFunc"></i>
</div>
</SlickItem>
</SlickList>
</div>
</template>
<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],
}
},
components: {
SlickItem,
SlickList
},
methods: {
moveStart(event){ //拖拽开始
console.log(event)
},
onMove(event){ //拖拽排序过程中移动鼠标时触发
console.log(event)
},
moveEnd(event){ //拖拽排序结束时触发
console.log(event)
},
getChangeList(value){ //拖拽排序后以新排序的列表结束后触发
console.log(value)
},
editFunc(){}, //点击方法
deleteFunc(){}, //点击方法
},
}
</script>
<style lang="less" scoped>
</style>
需要注意的点
- slicksort拖拽列表中,是无法识别点击事件,但可以接受到 @mousedown 事件和 @mouseup事件,这个是个人在无数实验中得到的一个代替@click的方法。使用 @mousedown.stop="" @mouseup=“editFunc”,这样就可以高防点击事件(PC端有效,移动端还未尝试)
- helperClass,拖拽出来的元素样式,必须要重写一份css否则,拖拽时就会没有样式,这也是slicksort的一个缺点,而draggable在关闭H5自带拖拽时,就不用写多一份css样式。
- @sort-start 排序开始时被触发
发出: { event: MouseEvent, node: HTMLElement, index: number, collection: string }
@sort-move 在排序过程中移动鼠标时触发
发出: { event }
@sort-end 排序结束时触发
发出: { event, newIndex, oldIndex, collection }
@input 排序后以新排序的列表结束后触发
发出: Array
小补充
在开发中遇到了switch开关的拖拽动画bug,拖拽完后,由于重新加载了dom结构,导致每拖拽一次,动画就会加载一次,影响美观。解决方案;在 @sort-start 方法中给拖拽列添加一个class,用于关闭动画;在 @input的方法中,再去掉关闭动画的class,就可以解决动画重新加载问题。