drag and drop

resources/vue/components/MessagesList.vue

@@ -33,7 +33,7 @@
                     :id="`message_${message.id}`"
                     :class="isMessageRead(message) ? 'read' : 'unread'"
                     draggable="true"
-                    @dragstart="dragStart(message)" @dragend="dragStop()"
+                    @dragstart="dragStart(message, $event)" @dragend="dragStop()"
                 >
                     <td class="hidden-small-down">
                         <input type="checkbox" :checked="messageIsSelected(message)" :value="message.id" @click="selectedMessage(message)">
@@ -82,13 +82,18 @@
             <sidebar-widget :title="$gettext('Schlagwörter')">
                 <template #content>
                     <ul class="widget-list widget-links sidebar-views">
-                        <li class="active">
-                            <a href="#" @click.prevent>
+                        <li :class="{active: !selectedTag}">
+                            <a href="#" @click.prevent="selectedTag = null">
                                 {{ $gettext('Alle Nachrichten') }}
                             </a>
                         </li>
-                        <li v-for="tag in tags" :key="`tag-${tag}`" :class="{dropzone: isDragging}" @drop="drop()">
-                            <a href="#" @click.prevent>
+                        <li v-for="tag in tags" :key="`tag-${tag}`"
+                            :class="{active: selectedTag === tag, dropzone: isDragging, draggedover: draggedOverTag === tag}"
+                            @drop="drop(tag, $event)"
+                            @dragover.prevent="draggedOver(tag)" @dragenter.prevent
+                            @dragleave="draggedOver(null)"
+                        >
+                            <a href="#" @click.prevent="selectedTag = tag">
                                 {{ tag }}
                             </a>
                         </li>
@@ -118,6 +123,8 @@ export default {
     data () {
         return {
             selected: [],
+            selectedTag: null,
+            draggedOverTag: null,
             pageOptions: {
                 offset: 0,
                 limit: 30,
@@ -230,15 +237,23 @@ export default {
             this.observed = element;
             this.observer.observe(this.observed);
         },
-        dragStart(message) {
+        dragStart(message, event) {
             this.isDragging = true;
+
+            event.dataTransfer.dropEffect = 'move';
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('messageId', message.id);
         },
         dragStop(message) {
             this.isDragging = false;
         },
-        drop() {
-            console.log('dropped');
+        drop(tag, event) {
+            const messageId = event.dataTransfer.getData('messageId');
+            console.log('dropped message on tag', messageId, tag);
         },
+        draggedOver(tag) {
+            this.draggedOverTag = tag;
+        }
     },
     computed: {
         ...mapGetters({
@@ -267,7 +282,10 @@ export default {
 </script>
 <style scoped lang="scss">
 .dropzone {
-    background-color: var(--red);
+    background-color: var(--red-20);
+}
+.dropzone.draggedover {
+    background-color: var(--red-80);
 }
 
 .fade-enter-active,

resources/vue/store/MessagesStore.js

@@ -23,7 +23,6 @@ export default new Vuex.Store({
             actions: {
                 async [LOAD_TAGS]({ commit }) {
                     const response = await jsonapiClient.get('/messages/tags');
-                    console.log('response', response);
                     commit(SET_TAGS, await response.data);
                 },
             },