Vue——web端数组拖拽排序插件——vue.draggable

jslyty

于 2021-08-13 11:14:04 发布

阅读量770

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue 前端文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/jslyty/article/details/119671182

本文介绍了如何使用Vue.js的vue.draggable插件实现Web端数组元素的拖拽排序功能，详细讲解了安装、基本用法及注意事项，帮助开发者提升交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	关于web端数组拖拽排序功能，有h5自带的draggable属性，以及基于此的sortablejs插件，以及在此基础上基于Vue框架的vue.draggable。现在先讨论一下vue.draggable，后面有时间再详细研究。
	参考链接：https://www.itxst.com/vue-draggable/tutorial.html
	一.安装
		使用yarn add vuedraggable
		或者npm i -S vuedraggable
	二.使用
		<template>
			<!--使用draggable组件-->
			 <draggable v-model="myArray" animation="1000" @start="onStart" @end="onEnd">
			    <transition-group>
			     	<div class="item" v-for="element in myArray" :key="element.id">{
  
  {element.name}}</div>
			    </transition-group>
			</draggable> 
		</template>
		<script>
			//导入draggable组件
			import draggable from 'vuedraggable'
			export default {
			  //注册draggable组件
			   components: {
			            draggable,
			        },
			   data() {
				    return { 
				      drag:false,
				      //定义要被拖拽对象的数组
				      myArray:[
				        {people:'cn',id:1,name:'www.itxst.com'},
				        {people:'cn',id:2,name:'www.baidu.com'},