Vue技术开发中如何实现可拖拽的组件排序

npm install vue vue-sortable sortable --save

<template>  <div class="task-item" v-sortable>    <div class="task-content">      <h3>{{ task.title }}</h3>      <p>{{ task.description }}</p>    </div>  </div></template><script>export default {  props: {    task: Object  }}</script><style scoped>.task-item {  padding: 10px;  border: 1px solid #ccc;  background: #f9f9f9;  cursor: move;}.task-content {  margin-bottom: 10px;}</style>

<template>  <div class="task-list">    <task-item      v-for="(task, index) in tasks"      :key="task.id"      :task="task"      @drag-end="onDragEnd(index)"    ></task-item>  </div></template><script>import TaskItem from './TaskItem'export default {  components: {    TaskItem  },  data() {    return {      tasks: [        { id: 1, title: '任务1', description: '这是任务1的描述' },        { id: 2, title: '任务2', description: '这是任务2的描述' },        { id: 3, title: '任务3', description: '这是任务3的描述' },        // 其他任务...      ]    }  },  methods: {    onDragEnd(index) {      // 更新任务的排序      const [task] = this.tasks.splice(index, 1)      this.tasks.splice(index, 0, task)    }  }}</script><style scoped>.task-list {  display: flex;  flex-wrap: wrap;  justify-content: flex-start;}</style>

<template>  <div>    <h1>任务管理应用</h1>    <task-list></task-list>  </div></template><script>import TaskList from './TaskList'export default {  components: {    TaskList  }}</script><style>h1 {  text-align: center;  margin: 20px 0;}</style>