dnd wip

resources/views/livewire/mapper-left.blade.php

@@ -1,3 +1,10 @@
-<div>
+<ul class="drag-and-drop__items" :class="{ 'drag-and-drop__items--removing': removing }" x-on:drop="removing = false"
+    x-on:drop.prevent="
+                const id = event.dataTransfer.getData('text/plain');
+                const target = event.target.closest('ul');
+                const element = document.getElementById(id);
+                alert(element)
+            "
+    x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
     {{ $this->table }}
-</div>
+</ul>

resources/views/livewire/mapper-right.blade.php

@@ -1,3 +1,6 @@
-<div>
-    {{ $this->table }}
+<div class="text-xs drag-and-drop-right" x-data>
+    <div class="drag-and-drop-right__items" x-on:drop="alert('right')" x-on:dragover.prevent="adding = true"
+        x-on:dragleave.prevent="adding = false">
+        {{ $this->table }}
+    </div>
 </div>

resources/views/livewire/top-menu-items.blade.php

@@ -23,7 +23,7 @@
 
             {{-- Modal content --}}
 
-            <div class="grid grid-cols-2 gap-4">
+            <div class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ adding: false, removing: false }">
                 <div>
                     @livewire('mapper-left')
                 </div>