Add item moving to master view

static/views/master/script.js

@@ -1,8 +1,27 @@
 var text = document.getElementById("msg").innerText
 msg = JSON.parse(text)
 
+function onDrag (evt) {
+    var item = evt.item;  // dragged HTMLElement
+    fromplayer = evt.from.getAttribute("inventory")
+    toplayer = evt.to.getAttribute("inventory")
+    itemid = item.getAttribute("itemid")
+    toslot = evt.newIndex
+    fromslot = evt.oldIndex
+    data = {
+        "fromplayer": fromplayer,
+        "toplayer": toplayer,
+        "itemid": itemid,
+        "fromslot": fromslot,
+        "toslot": toslot,
+    }
+    fetch('api/move_item', {
+        method: 'POST',
+        body: JSON.stringify(data),
+    });
+}
 function draw_item(item) {
-    const itemdiv = document.createElement('div');
+    const itemdiv = document.createElement('itemdiv');
     var name = item["name"]
     var description = item["description"]
     var image = item["image"] || "../static/empty.jpg"
@@ -27,6 +46,7 @@ function draw_item(item) {
     itemdiv.appendChild(descriptionspan);
     itemdiv.style.display = "inline-block"
     itemdiv.style.background = "lightcoral"
+    itemdiv.setAttribute("itemid", item["id"]);
     return itemdiv
 }
 
@@ -64,7 +84,15 @@ Object.keys(items).forEach( item => {
     itemsdiv.appendChild(itemdiv);
     
 });
-Sortable.create(itemsdiv, {"group": "items"});
+Sortable.create(itemsdiv, 
+    {
+        "group": "items",
+        "sort": "false",
+        "draggable": "itemdiv",
+        "onEnd": onDrag,
+
+});
+itemsdiv.setAttribute("inventory", "master");
 wrapper.appendChild(itemsheading);
 wrapper.appendChild(itemsdiv);
 
@@ -84,13 +112,21 @@ Object.keys(msg.inventories).forEach( name => {
     Object.keys(inventory).forEach( item => {
         item = inventory[item];
         var thediv = draw_item(item);
-        thediv.style.display = "block";
+        //thediv.style.display = "block";
         inventorydiv.appendChild(thediv);
         inventorydiv.style.display = "inline-block";
     });
-    Sortable.create(inventorydiv, {"group": "items"});
 
     inventorydiv.style.background = "lightgreen";
+    
+    Sortable.create(inventorydiv, 
+    {
+        "group": "items",
+        "sort": "false",
+        "draggable": "itemdiv",
+        "onEnd": onDrag,
+    });
+    inventorydiv.setAttribute("inventory", name);
 
     inventories.appendChild(inventorydiv);