add drag handle

Author: visualjerk

components/DragButton.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="flex-shrink-0 px-3 text-slate-400 hover:text-indigo-600 dark:text-slate-500 dark:hover:text-teal-500 cursor-move drag-handle"
+  >
+    <mdicon name="drag" size="20" />
+  </button>
+</template>

components/ListView.vue

@@ -114,6 +114,7 @@ function handleChange(event: DraggableChangeEvent) {
       @update:model-value="handleMove"
       @change="handleChange"
       item-key="id"
+      handle=".drag-handle"
     >
       <template #item="{ element: todo }">
         <li class="mt-2 first-of-type:mt-0">
@@ -134,6 +135,7 @@ function handleChange(event: DraggableChangeEvent) {
         @update:model-value="handleMove"
         @change="handleChange"
         item-key="id"
+        handle=".drag-handle"
       >
         <template #item="{ element: todo }">
           <li class="mt-2 first-of-type:mt-0">

components/TodoItem.vue

@@ -70,6 +70,7 @@ function formatDate(dateISO: string) {
     </div>
     <template #post>
       <DeleteButton @click="$emit('delete')" />
+      <DragButton />
     </template>
   </BaseItem>
 </template>