todo & memo style

resources/js/views/ToDoLists/ToDoList.vue

@@ -3,7 +3,11 @@
         <div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
             <div>
                 <h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
-                <ul class="draggable-list">
+                <ul class="draggable-list drop-zone"
+                    @drop='onDrop($event, toDoList)'
+                    @dragover.prevent
+                    @dragenter.prevent
+                >
                     <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
                         ------- no to Do -------
                     </div>
@@ -11,7 +15,11 @@
                           v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
                           :key="indexToDo"
                           :toDo="toDo"
-                          :position="indexToDo" />
+                          :position="indexToDo"
+                          draggable
+                          @dragstart='startDrag($event, toDo)'
+                          class='drag-el'
+                          />
                 </ul>
             </div>
             <div class="flex items-center mt-2">
@@ -25,6 +33,7 @@
 <script>
 import InputField from '../../components/InputField'
 import ToDo from './ToDo'
+//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
 
 export default {
     name: 'ToDoList',
@@ -35,7 +44,7 @@ export default {
         return {
             name: '',
             errors: null,
-            list: null,
+            dragStartIndex: null,
             edit: false,
         }
     },
@@ -45,10 +54,6 @@ export default {
             require: true
         }
     },
-    mounted() {
-        this.list = this.$el.querySelector('.draggable-list')
-        console.log(this.list)
-    },
     methods: {
         addToDo: function () {
             // eslint-disable-next-line no-undef
@@ -70,7 +75,19 @@ export default {
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
-        }
+        },
+        startDrag: (evt, item) => {
+            console.log('StartDrag', evt, item)
+            evt.dataTransfer.dropEffect = 'move'
+            evt.dataTransfer.effectAllowed = 'move'
+            evt.dataTransfer.setData('itemID', item.id)
+        },
+        onDrop (evt, list) {
+            console.log('onDrop', evt, list, this.toDoList)
+            const itemID = evt.dataTransfer.getData('itemID')
+            const item = this.toDoList.data.attributes.data.to_dos.data.find(item => item.id == itemID)
+            item.list = list
+        },
     }
 }
 </script>