vue列表拖拽排序

最新推荐文章于 2025-06-17 14:15:00 发布

原创

最新推荐文章于 2025-06-17 14:15:00 发布 · 456 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中利用vuedraggable插件进行列表的拖拽排序。首先，通过yarn或npm安装vuedraggable依赖。接着，在Vue2的页面中引入该插件，实现列表元素的动态排序功能。

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

描述：通过vue的插件 draggable完成列表拖拽排序功能

1、安装依赖

yarn add vuedraggable
或
npm i -S vuedraggable

2、vue2 页面中引入

<template>
	<div>
    <div @click="commitSort">确定排序</div>
    <draggable v-model="dragList" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @update="onUpdate" @end="onEnd">
            <transition-group>
                <div class="item" v-for="element in myArray" :key="element.id">{
  
  {element.name}}</div>
            </transition-group>
        </draggable>
  </div>
</template>

<script>
  import vuedraggable from 'vuedraggable'
  export default{
    data(){
      return {
        dragList:[
          { people: 'cn', id: 1, sort:0, name: 'www.itxst.com' },
          { people: 'cn', id: 2, sort:1, name: 'www.baidu.com' },
          { people: 'cn', id: 3, sort:2,name: 'w