vue-slicksort拖拽组件——添加点击事件

简单介绍

在项目中我个人使用了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，就可以解决动画重新加载问题。