vue实现拖拽与排序功能的示例代码

<template>
  <div>
    <h2>任务列表</h2>
    <draggable v-model="tasks" :options="dragOptions">
      <div
        v-for="(task, index) in tasks"
        :key="task.id"
        class="task"
      >
        {{ task.text }}
      </div>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        { id: 1, text: "任务 1" },
        { id: 2, text: "任务 2" },
        { id: 3, text: "任务 3" },
        { id: 4, text: "任务 4" },
      ],
      dragOptions: {
        animation: 200,
        group: "tasks",
      },
    };
  },
};
</script>
<style>
.task {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: grab;
}
</style>

<template>
  <div>
    <h2>任务列表</h2>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="添加任务" />
    <draggable v-model="tasks" :options="dragOptions">
      <div
        v-for="(task, index) in tasks"
        :key="task.id"
        class="task"
      >
        {{ task.text }}
      </div>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        { id: 1, text: "任务 1" },
        { id: 2, text: "任务 2" },
        { id: 3, text: "任务 3" },
        { id: 4, text: "任务 4" },
      ],
      newTask: "",
      dragOptions: {
        animation: 200,
        group: "tasks",
      },
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() === "") return;
      const newId = this.tasks.length + 1;
      this.tasks.push({ id: newId, text: this.newTask });
      this.newTask = "";
    },
  },
};
</script>