pop15

public/css/building.css

@@ -250,7 +250,7 @@ body {
   background-image: url("/images/items/slot_mittel.png");
   background-size: cover;
   background-position: center;
-
+  transition: 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -285,7 +285,20 @@ body {
   align-items: center;
   justify-content: center;
 
-  cursor: pointer;
+  cursor: grab;
+}
+
+.inventory-slot:active {
+  cursor: grabbing;
+}
+
+.inventory-slot:hover,
+.equip-slot:hover {
+  filter: brightness(1.2);
+}
+
+.equip-slot.drag-over {
+  outline: 2px solid gold;
 }
 
 .item-common {
@@ -311,10 +324,6 @@ body {
   object-fit: contain;
 }
 
-.inventory-slot:hover {
-  filter: brightness(1.2);
-}
-
 /* =========================
    Tooltip (Items)
 ========================= */

public/js/buildings/wohnhaus.js

@@ -63,18 +63,22 @@ async function loadInventory() {
     const icon = item.icon || "/images/items/default.png";
 
     html += `
-<div class="inventory-slot"
-data-slot="${item.equip_slot}"
-data-id="${item.id}"
-data-level="${item.level}">
-<img src="${icon}">
-</div>
-`;
+    <div class="inventory-slot"
+    data-slot="${item.equip_slot || ""}"
+    data-id="${item.id}"
+    data-level="${item.level}"
+    draggable="true">
+
+    <img src="${icon}">
+
+    </div>
+    `;
   });
 
   grid.innerHTML = html;
 
-  initEquip();
+  initDrag();
+  initDrop();
 }
 
 function initEquip() {
@@ -97,6 +101,16 @@ function initEquip() {
   });
 }
 
+function initDrag() {
+  document.querySelectorAll(".inventory-slot").forEach((item) => {
+    item.addEventListener("dragstart", (e) => {
+      e.dataTransfer.setData("itemId", item.dataset.id);
+      e.dataTransfer.setData("itemLevel", item.dataset.level);
+      e.dataTransfer.setData("slot", item.dataset.slot);
+    });
+  });
+}
+
 async function saveEquipment(slot, itemId, itemLevelId) {
   await fetch("/api/equip", {
     method: "POST",
@@ -110,3 +124,31 @@ async function saveEquipment(slot, itemId, itemLevelId) {
     }),
   });
 }
+
+function initDrop() {
+  document.querySelectorAll(".equip-slot").forEach((slot) => {
+    slot.addEventListener("dragover", (e) => {
+      e.preventDefault();
+    });
+
+    slot.addEventListener("drop", (e) => {
+      e.preventDefault();
+
+      const itemId = e.dataTransfer.getData("itemId");
+      const itemLevel = e.dataTransfer.getData("itemLevel");
+      const itemSlot = e.dataTransfer.getData("slot");
+
+      const targetSlot = slot.dataset.slot;
+
+      if (itemSlot !== targetSlot) return;
+
+      const icon = document.querySelector(
+        '.inventory-slot[data-id="' + itemId + '"] img',
+      ).src;
+
+      slot.innerHTML = `<img src="${icon}">`;
+
+      saveEquipment(targetSlot, itemId, itemLevel);
+    });
+  });
+}