pop28

public/css/building.css

@@ -279,6 +279,11 @@ body {
   display: none;
 }
 
+.slot.drag-over {
+  outline: 3px solid gold;
+  box-shadow: 0 0 10px gold;
+}
+
 .slot:hover {
   filter: brightness(1.3);
 }

public/js/buildings/wohnhaus.js

@@ -108,37 +108,11 @@ async function loadInventory() {
 
   grid.innerHTML = html;
 
+  initInventoryDrop();
   initDrag();
   initDrop();
 }
 
-function initEquip() {
-  let draggedItem = null;
-
-  document.querySelectorAll(".inventory-slot").forEach((item) => {
-    item.addEventListener("dragstart", () => {
-      draggedItem = item;
-    });
-  });
-
-  document.querySelectorAll(".slot").forEach((slot) => {
-    slot.addEventListener("dragover", (e) => {
-      e.preventDefault();
-    });
-
-    slot.addEventListener("drop", (e) => {
-      e.preventDefault();
-
-      const itemSlot = draggedItem.dataset.slot;
-      const targetSlot = slot.dataset.slot;
-
-      if (itemSlot !== targetSlot) return;
-
-      slot.innerHTML = draggedItem.innerHTML;
-    });
-  });
-}
-
 function initDrag() {
   document.querySelectorAll(".inventory-slot").forEach((item) => {
     item.addEventListener("dragstart", (e) => {
@@ -184,10 +158,10 @@ function initDrop() {
         '.inventory-slot[data-id="' + itemId + '"]',
       );
 
-      item.remove();
-
       const icon = item.querySelector("img").src;
 
+      item.remove();
+
       /* Wenn Slot schon Item hat */
 
       const existingItem = slot.querySelector("img");
@@ -200,15 +174,20 @@ function initDrop() {
         newSlot.classList.add("inventory-slot");
 
         newSlot.innerHTML = `<img src="${existingItem.src}">`;
+        newSlot.setAttribute("draggable", "true");
 
         inventory.appendChild(newSlot);
+
+        initDrag();
       }
 
       /* Neues Item setzen */
 
       const label = slot.querySelector(".slot-label");
 
-      slot.innerHTML = `<img src="${icon}">`;
+      slot.innerHTML = `<img src="${icon}" draggable="true">`;
+
+      initSlotDrag();
 
       if (label) slot.appendChild(label);
 
@@ -218,3 +197,43 @@ function initDrop() {
     });
   });
 }
+
+function initSlotDrag() {
+  document.querySelectorAll(".slot").forEach((slot) => {
+    slot.addEventListener("dragstart", (e) => {
+      const img = slot.querySelector("img");
+
+      if (!img) return;
+
+      e.dataTransfer.setData("icon", img.src);
+      e.dataTransfer.setData("fromSlot", slot.dataset.slot);
+    });
+  });
+}
+
+function initInventoryDrop() {
+  const grid = document.getElementById("inventory-grid");
+
+  grid.addEventListener("dragover", (e) => {
+    e.preventDefault();
+  });
+
+  grid.addEventListener("drop", (e) => {
+    e.preventDefault();
+
+    const icon = e.dataTransfer.getData("icon");
+
+    if (!icon) return;
+
+    const newItem = document.createElement("div");
+
+    newItem.classList.add("inventory-slot");
+    newItem.setAttribute("draggable", "true");
+
+    newItem.innerHTML = `<img src="${icon}">`;
+
+    grid.appendChild(newItem);
+
+    initDrag();
+  });
+}