vuedraggable在Vue2中实现可拖拽排序

一、使用场景

需要使用拖动排序功能的页面，可支持任意循环区域拖动排序。

二、使用方法

1、安装vuedraggable

npm i vuedraggable

2、导入组件并声明

import draggable from 'vuedraggable';
components: { draggable }

3、使用组件

<draggable v-model="sortList" @chang="change" @start="start" @end="end" :move="move">
	<div v-for="(item, index) in list" :key="index">
	  可拖动排序内容区域
	</div>
</draggable>

// 回调方法
change(e){
  console.log('change', e)
},
start (e){
  console.log('start',e)
},
end (e){
  console.log('end',e)
},
move(e, orgin){
  console.log('move', e, orgin)
}

三、注意事项

1、不需要回调处理可以不写回调方法

2、如果是vue3的版本使用vue-draggable-plus

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈