feat:Drag&&drop_sorting

todos/src/App.vue

@@ -30,7 +30,6 @@ export default {
     },
   },
 
-
   methods: {
     addTodo(newTodo) {
       const todo = {
@@ -42,6 +41,11 @@ export default {
       console.log("添加 Todo:", todo);
     },
 
+    moveTodo({ oldIndex, newIndex }) {
+      const item = this.todos.splice(oldIndex, 1)[0];
+      this.todos.splice(newIndex, 0, item);
+    },
+
     delTodo(item) {
       console.log("删除 Todo:", item);
       this.todos = this.todos.filter((t) => t.id !== item.id);
@@ -67,12 +71,11 @@ export default {
     },
   },
 };
-
 </script>
 
 <template>
   <TodoHeader @addTodo="addTodo" />
-  <TodoList :todos="todoList" @delTodo="delTodo" />
+  <TodoList :todos="todoList" @delTodo="delTodo" @move="moveTodo" />
   <TodoFooter
     :count="todoList.length"
     :tabType="tabType"

todos/src/components/TodoList.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="tdContainer">
     <ul class="tdList">
-      <li class="tdItem" v-for="item in todos" :key="item.id">
+      <li
+        class="tdItem"
+        v-for="(item, index) in todos"
+        :key="item.id"
+        draggable="true"
+        @dragstart="onDragStart(index)"
+        @dragover.prevent="onDragOver(index)"
+        @drop="onDrop(index)"
+      >
         <div class="tdItem-main">
           <input type="checkbox" v-model="item.completed" class="toToggle" />
 
@@ -101,7 +109,15 @@ export default {
     delTodo(item) {
       this.$emit("delTodo", item);
     },
+    onDragStart(index) {
+      this.dragIndex = index;
+    },
+    onDragOver(index) {},
+    onDrop(index) {
+      if (this.dragIndex === null || this.dragIndex === index) return;
+      this.$emit("move", { oldIndex: this.dragIndex, newIndex: index });
+      this.dragIndex = null;
+    },
   },
 };
 </script>
-