feat:Drag&&drop_sorting

todos/package-lock.json

@@ -8,6 +8,7 @@
       "name": "todos",
       "version": "0.0.0",
       "dependencies": {
+        "sortablejs": "^1.15.6",
         "vue": "^3.5.24"
       },
       "devDependencies": {
@@ -1163,6 +1164,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
+      "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

todos/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "sortablejs": "^1.15.6",
     "vue": "^3.5.24"
   },
   "devDependencies": {

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>
-