drag'n'drop

src/static/test/index.html

@@ -15,10 +15,10 @@
   <div id="p0_discard">
     <div id="p0_discard_0" class="pile"></div>
     <div></div>
-    <div id="p0_discard_1" class="pile"></div>
+    <div id="p0_discard_1" class="pile" dropable="true"></div>
-    <div id="p0_discard_2" class="pile"></div>
+    <div id="p0_discard_2" class="pile" dropable="true"></div>
-    <div id="p0_discard_3" class="pile"></div>
+    <div id="p0_discard_3" class="pile" dropable="true"></div>
-    <div id="p0_discard_4" class="pile"></div>
+    <div id="p0_discard_4" class="pile" dropable="true"></div>
   </div>
   <div id="p1" class="player">
     <div id="p1_pile_card_0" class="pile"></div>
@@ -45,12 +45,12 @@
     <div id="p3_pile_card_4" class="pile"></div>
   </div>
   <div id="mainstack">
-    <div id="mainstack_card_0" class="pile"></div>
+    <div id="mainstack_card_0" class="pile" dropable="true"></div>
-    <div id="mainstack_card_1" class="pile"></div>
+    <div id="mainstack_card_1" class="pile" dropable="true"></div>
-    <div id="mainstack_card_2" class="pile"></div>
+    <div id="mainstack_card_2" class="pile" dropable="true"></div>
-    <div id="mainstack_card_3" class="pile"></div>
+    <div id="mainstack_card_3" class="pile" dropable="true"></div>
   </div>
 </div>
-<script src="./main.js" defer></script>
+<script src="./js/main.js" type="module" defer></script>
 </body>
 </html>

src/static/test/js/events.js

@@ -0,0 +1,49 @@
+let dragged;
+
+document.querySelectorAll("[dropable='true']").forEach(e => {
+  e.addEventListener("drag", event => {
+  }, false);
+
+  e.addEventListener("dragstart", event => {
+    dragged = event.target;
+  }, false);
+
+  e.addEventListener("dragend", event => {
+  }, false);
+
+  e.addEventListener("dragover", event => {
+    event.preventDefault();
+  }, false);
+
+  e.addEventListener("dragenter", event => {
+    event.target.style.opacity = "0.4";
+  }, false);
+
+  e.addEventListener("dragleave", event => {
+    event.target.style.opacity = "";
+  }, false);
+
+  e.addEventListener("drop", event => {
+    event.preventDefault();
+    const to = event.target.id.slice(0, 4) !== "main" ? event.target.parentNode : event.target;
+
+    const from = {
+      val: dragged
+    };
+
+    console.log("from", dragged);
+    console.log("to", to);
+
+    event.target.style.opacity = "";
+  }, false);
+});
+
+export default ({
+  createCardEvents: () => {
+    document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
+      card.addEventListener("dragstart", event => {
+        event.dataTransfer.setData("text/plain", null);
+      });
+    });
+  }
+});

src/static/test/js/main.js

@@ -1,24 +1,29 @@
+import events from "./events.js";
+
 const colors = {
   1: "blue", 2: "blue", 3: "blue", 4: "blue",
   5: "green", 6: "green", 7: "green", 8: "green",
   9: "red", 10: "red", 11: "red", 12: "red"
 };
-const card = ({ val }) =>
+const card = ({ val, drag }) =>
-  `<div class="card_outer" draggable="true">
+  `<div class="card_outer" data-val="${val}"${drag ? 'draggable="true"' : ''}>
     <div class="card_tri card_color_${colors[val]}"></div>
     <div class="card_number card_number_1">${val}</div>
     <div class="card_number_middle ${colors[val]}">${val}</div>
     <div class="card_number card_number_2">${val}</div>
   </div>`;
 
-/*document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend",
-  [{ val: ~~(Math.random() * 12) + 1 }].map(card).join``
-);*/
-
 const fillAll = () => {
   document.querySelectorAll(".pile").forEach(slot => {
+    console.log(slot.id);
+    if(slot.id.slice(0, 4) === "main" && slot.id.slice(-1) === "0")
+      return;
     slot.insertAdjacentHTML("beforeend",
-      [{ val: ~~(Math.random() * 12) + 1 }].map(card).join``
+      [{ val: ~~(Math.random() * 12) + 1, drag: slot.id.slice(0, 2) === "p0" }].map(card).join``
     );
   });
 };
+fillAll();
+
+
+events.createCardEvents();

src/static/test/main.css

@@ -17,6 +17,24 @@ html, body {
   height: 100%;
   width: 100%;
 }
+* {
+  user-drag: none; 
+  user-select: none;
+}
+*[draggable=true] {
+  cursor: move;
+}
+div[dropable=true] > * > * {
+  pointer-events: none;
+}
+[draggable] {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -khtml-user-drag: element;
+  -webkit-user-drag: element;
+}
 
 .player {
   position: absolute;
@@ -176,8 +194,3 @@ html, body {
     var(--blue) 93.33%
   );
 }
-
-[draggable=true] {
-  cursor: move;
-}
-