From e9bb8b3acf29c92d87f92d9682055c3591609527 Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Fri, 18 Jun 2021 14:34:11 -0400
Subject: [PATCH] Create ex 10 Drag and drop

---
 chapter10/ex 10 Drag and drop | 55 +++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 chapter10/ex 10 Drag and drop
diff --git a/chapter10/ex 10 Drag and drop b/chapter10/ex 10 Drag and drop
new file mode 100644
index 0000000..e0a7006
--- /dev/null
+++ b/chapter10/ex 10 Drag and drop	
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+    <style>
+        .box {
+            width: 100px;
+            height: 100px;
+            border: 1px solid black;
+            background-color: white;
+        }
+        .red {
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">1
+        <div id="dragme" draggable="true">
+            Drag Me Please!
+        </div>
+    </div>
+    <div class="box">2</div>
+    <script>
+        const dragme = document.querySelector("#dragme");
+        dragme.addEventListener("dragstart", (e) => {
+            dragme.style.opacity = .5;
+        })
+        dragme.addEventListener("dragend", (e) => {
+            dragme.style.opacity = "";
+        })
+        const boxes = document.querySelectorAll(".box");
+        boxes.forEach(box => {
+            box.addEventListener("dragenter", (e) => {
+                e.target.classList.add('red');
+            })
+            box.addEventListener("dragover", (e) => {
+                e.preventDefault();
+            });
+            box.addEventListener("dragleave", (e) => {
+                //console.log("leave");
+                e.target.classList.remove('red');
+            });
+            box.addEventListener("drop", (e) => {
+                e.preventDefault();
+                console.log("dropped");
+                e.target.appendChild(dragme);
+            });
+        })
+        function dragStart(e) {
+            console.log("Started");
+        }
+    </script>
+</body>
+</html>
