vuedraggable制作任务看板，实现数据拖动并获取拖动后的数据

使用vuedraggable可以很容易地实现任务看板的数据拖动功能。以下是一个简单的例子，展示如何使用vuedraggable创建一个任务看板，并在拖动后获取更新后的数据数组。

首先，确保你已经安装了vuedraggable：

npm install vuedraggable

然后，你可以在你的Vue组件中使用它：

<template>
  <div>
    <draggable v-model="tasks" @end="onDragEnd">
      <div v-for="task in tasks" :key="task.id">
        {{ task.name }}
      </div>
    </draggable>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        { id: 1, name: '任务A' },
        { id: 2, name: '任务B' },
        { id: 3, name: '任务C' },
        // ...更多任务
      ],
    };
  },
  methods: {
    onDragEnd() {
      // 拖动结束后，你可以在这里获取更新后的数组
      console.log(this.tasks);
    },
  },
};
</script>

在这个例子中，tasks数组通过v-model绑定到draggable组件，用户可以拖动数组中的元素来重新排序。每次拖动结束后，onDragEnd方法会被调用，你可以在这个方法中访问更新后的tasks数组。这个数组的元素顺序反映了用户拖动后的最终顺序。