vue拖拽列表----vuedraggable组件；ElementUI 实现Table组件实现拖拽效果；vue3使用vue-draggable-plus

i_am_a_div_日积月累_

已于 2024-12-13 13:55:19 修改

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue element-ui js 文章标签： vue.js elementui javascript

于 2022-07-12 18:15:46 首次发布

本文链接：https://blog.youkuaiyun.com/i_am_a_div/article/details/125748925

vue 同时被 3 个专栏收录

111 篇文章

订阅专栏

element-ui

76 篇文章

订阅专栏

39 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中使用vuedraggable库实现列表元素的拖拽排序功能。首先，通过npm安装vuedraggable依赖，然后在模板中引入并设置v-model绑定数据。例子中展示了简单的拖拽配置，但遇到`Value and list props are mutually exclusive! Please set one or another.`的错误。错误原因是因为同时设置了value和list属性，需要调整代码避免同时使用这两个属性。

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

vue2使用vue-draggable中文文档
vue3使用vue-draggable-plus

简单的遍历list列表拖拽

部分元素不可拖拽参考；部分不可拖拽参考

ElementUI 实现Table组件实现拖拽效果

列表的拖拽功能：

一、下载依赖

npm i -S vuedraggable

二、页面使用

 
<template>
  <div>
 <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item.projectid" class="item">
          <p>{{item.name}}</p>
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>
<script>
import vuedraggable from "vuedraggable";
export default {
  components: { vuedraggable },
  props: {},
  data() {
    return {
    
      list: [
        {
          name: "体型",
          projectid: 1,
        },
        {
          name: "屈臂悬垂",
          projectid: 2,
        },
        {
          name: "引体向上",
          projectid: 3,
        },
      ],
     
    };
  },
  updated() {
    console.log(this.list);
  
  	},
  }