vue拖拽列表----vuedraggable组件

<template>
  <div>
    <h3>vue拖拽列表----vuedraggable组件</h3>
    <h2>第一步 npm i vuedraggable@4.1.0 --save</h2>
    <h3>表格el-table不可以使用</h3>
    <!-- 第三步使用 -->
    <vuedraggable class="wrapper" v-model="list">
      <div v-for="item in list" :key="item.projectid" class="item">
        <p>{{ item.name }}</p>
      </div>
    </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);
  },
};
</script>