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

最新推荐文章于 2024-08-29 15:10:00 发布

jslyty

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量624

点赞数

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

本文链接：https://blog.csdn.net/jslyty/article/details/119671182

版权

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

摘要由CSDN通过智能技术生成

	关于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,
				      //定义要被拖拽对象的数组