homebrew click and drag

client/board.js

@@ -13,6 +13,3 @@ const BoardLocations = {
 
 
 };
-
-
-

client/dragable.js

@@ -1,29 +1,47 @@
 // I decided not to use the drag and drop API
 // purely because its very ugly
 
+
 document.querySelector('#game-container').addEventListener('mousemove', mouseMove);
 document.querySelector('#game-container').addEventListener('mouseup',   mouseUp);
 
+
 document.querySelectorAll('piece').forEach(element => {
     element.addEventListener('mousedown', e => mouseDown(e, element));
+    // element.addEventListener('mousemove', e => mouseMove(e, element));
+    // element.addEventListener('mouseup', e => mouseUp(e, element));
 });
 
-function mouseDown(event, element = 'none')
+let state = {dx: 0, dy: 0};
+let selectedElement = {};
+
+function mouseDown(event, element)
 {
     event.preventDefault();
 
-    console.log(element, event);
+    state.dx = Math.abs(element.offsetLeft - event.clientX);
+    state.dy = Math.abs(element.offsetTop - event.clientY);
+
+    element.pointerEvents = 'none';
+    selectedElement = element;
+
+    console.log(element);
 }
 
-function mouseMove(event, element = 'none')
+function mouseMove(event)
 {
     event.preventDefault();
 
+    if (selectedElement.pointerEvents === 'none') {
+   
+        // Update top/left directly in the dom element:
+        selectedElement.style.left = `${event.clientX - state.dx}px`;
+        selectedElement.style.top = `${event.clientY - state.dy}px`;
+    }
 }
 
-function mouseUp(event, element = 'none')
+function mouseUp(event)
 {
     event.preventDefault();
-    
-    console.log(element, event);
+    selectedElement.pointerEvents = 'initial';
 }

client/game.css

@@ -2,28 +2,15 @@
 #game-container {
     border: 1px dotted black;
     padding-bottom: 20%;
-}
-
-#game-inventory-table {
-    display: table;
-    
-    max-width: 70%;
-
-    text-align: center;
-    font-size: 3.2vw;
-}
-
-.game-inventory-cell {
-    display: table-cell;
+    position: relative;
 }
 
 piece {
     cursor: move;
-    border: 1px solid black;
+    border: 1px dotted black;
     background-color: blanchedalmond;
-    width: 100%;
-    height: 0;
-    padding-bottom: 5%;
+
+    position: absolute;
 }
 
 #game-board {
@@ -38,7 +25,7 @@ piece {
     max-width: 70%;
 
     text-align: center;
-    font-size: 3.2vw; /* roughly 15 / table width */
+    font-size: 3vw; /* roughly 15 / table width */
 }
 
 .game-board-header {
@@ -50,7 +37,7 @@ piece {
 
     width: 100%;
     height: 0;
-    padding-bottom: 1%;
+    padding-bottom: 0%;
 }
 
 .game-board-col-header {
@@ -62,7 +49,7 @@ piece {
 
     width: 100%;
     height: 0;
-    padding-bottom: 1%;
+    padding-bottom: 0%;
 }
 
 .game-board-row {
@@ -74,9 +61,11 @@ piece {
 
     width: 100%;
     height: 0;
-    padding-bottom: 1%;
-    
+    padding-bottom: 0%;
+
     font-size: 2vw; /* roughly 15 / table width */
+    vertical-align: middle;
+    
     background: radial-gradient(circle, rgba(255,255,255,1) 38%, rgba(244,244,244,1) 94%);
 }
 

client/game.html

@@ -384,30 +384,14 @@
     </div>
 
     <p><p><p>
-
-    <div id="game-inventory-table">
-        <div class="game-inventory-cell">
-            <piece class="a" id="n1">A</piece>
-        </div>
-        <div class="game-inventory-cell">
-            <piece class="a" id="n2">A</piece>
-        </div>
-        <div class="game-inventory-cell">
-            <piece class="a" id="n3">A</piece>
-        </div>
-        <div class="game-inventory-cell">
-            <piece class="a" id="n4">A</piece>
-        </div>
-        <div class="game-inventory-cell">
-            <piece class="a" id="n5">A</piece>
-        </div>
-        <div class="game-inventory-cell">
-            <piece class="a" id="n6">A</piece>
-        </div>
-        <div class="game-inventory-cell">
-            <piece class="a" id="n7">A</piece>
-        </div>
-    </div>
+        
+    <piece class="unselectable" id="n1">A</piece>
+    <piece class="unselectable" id="n2">A</piece>
+    <piece class="unselectable" id="n3">A</piece>
+    <piece class="unselectable" id="n4">A</piece>
+    <piece class="unselectable" id="n5">A</piece>
+    <piece class="unselectable" id="n6">A</piece>
+    <piece class="unselectable" id="n7">A</piece>
 
     </div>
 

client/public/main.css

@@ -17,3 +17,17 @@ body {
     -ms-user-select: none;
     user-select: none;
 }
+
+/* Responsive mobile & touch support */
+@media screen and (max-width: 768px) {
+    body {
+      -webkit-overflow-scrolling: touch; /* Safari 3.1+ */
+      -moz-overflow-scrolling: touch; /* Firefox 2+ */
+      -ms-overflow-scrolling: touch; /* IE 10+ */
+      overflow-scrolling: touch; /* Standard syntax */
+      -webkit-user-select: none; /* Safari 3.1+ */
+      -moz-user-select: none; /* Firefox 2+ */
+      -ms-user-select: none; /* IE 10+ */
+      user-select: none; /* Standard syntax */
+    }
+  }