pop30

public/js/buildings/wohnhaus.js

@@ -187,7 +187,12 @@ function initDrop() {
 
       const label = slot.querySelector(".slot-label");
 
-      slot.innerHTML = `<img src="${icon}" draggable="true">`;
+      slot.innerHTML = `
+        <img src="${icon}"
+        draggable="true"
+        data-id="${itemId}"
+        data-level="${itemLevel}">
+        `;
 
       initSlotDrag();
 
@@ -205,8 +210,9 @@ function initSlotDrag() {
     img.addEventListener("dragstart", (e) => {
       const slot = img.closest(".slot");
 
-      e.dataTransfer.setData("icon", img.src);
+      e.dataTransfer.setData("itemId", img.dataset.id);
-      e.dataTransfer.setData("fromSlot", slot.dataset.slot);
+      e.dataTransfer.setData("itemLevel", img.dataset.level);
+      e.dataTransfer.setData("slot", slot.dataset.slot);
     });
   });
 }
@@ -221,19 +227,42 @@ function initInventoryDrop() {
   grid.addEventListener("drop", (e) => {
     e.preventDefault();
 
-    const icon = e.dataTransfer.getData("icon");
+    const itemId = e.dataTransfer.getData("itemId");
+    const itemLevel = e.dataTransfer.getData("itemLevel");
+    const slot = e.dataTransfer.getData("slot");
 
-    if (!icon) return;
+    if (!itemId) return;
+
+    const icon = document.querySelector(
+      '.slot[data-slot="' + slot + '"] img',
+    ).src;
 
     const newItem = document.createElement("div");
 
     newItem.classList.add("inventory-slot");
     newItem.setAttribute("draggable", "true");
 
+    newItem.dataset.id = itemId;
+    newItem.dataset.level = itemLevel;
+
     newItem.innerHTML = `<img src="${icon}">`;
 
     grid.appendChild(newItem);
 
+    /* Slot leeren */
+
+    const equipSlot = document.querySelector('.slot[data-slot="' + slot + '"]');
+
+    const label = equipSlot.querySelector(".slot-label");
+
+    equipSlot.innerHTML = "";
+
+    if (label) {
+      equipSlot.appendChild(label);
+    }
+
+    equipSlot.classList.remove("has-item");
+
     initDrag();
   });
 }