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

本文介绍了在Vue项目中使用vue-slicksort拖拽组件,并着重讨论如何在组件中添加点击事件,通过监听`@mousedown`和`@mouseup`事件作为点击事件的替代方案。同时提到了组件的安装、基本应用以及注意事项,包括样式重写和事件监听。在遇到switch开关拖拽动画bug时,提供了解决方法,即在排序开始和结束时动态添加和移除class来避免动画重复加载。
摘要由CSDN通过智能技术生成
简单介绍

在项目中我个人使用了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='tru
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值