feat:Drag&&drop_sorting

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