vue拖拽列表----vuedraggable组件；ElementUI 实现Table组件实现拖拽效果

vue-draggable中文文档

简单的遍历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);
  
  },

三、报错：Value and list props are mutually exclusive! Please set one or another.

这个原因是：