Finished Chapter 12 exercise 1

Drummingcoder · Drummingcoder · commit 41fdce0a0f6e · 2025-02-01T20:24:16.000Z
diff --git a/ch12exercise1.html b/ch12exercise1.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Chapter 12: Example 1</title>
+    <style>
+        [data-drop-target] {
+            height: 400px;
+            width: 200px;
+            margin: 2px;
+            background-color: gainsboro;
+            float: left;
+        }
+        .drag-enter {
+            border: 2px dashed #000;
+        }
+        .box {
+            width: 200px;
+            height: 200px;
+        }
+        .navy {
+            background-color: navy;
+        }
+        .red {
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <div data-drop-target="true">
+        <div id="box1" draggable="true" class="box navy"></div>
+        <div id="box2" draggable="true" class="box red"></div>
+    </div>
+    <div data-drop-target="true"></div>
+    <script>
+    function handleDragStart(e) {
+        var data = {
+            elementId: this.id,
+            message1: "You moved an element!",
+            message2: "Try and move me again.",
+            message3: "Please stop."
+        };
+        e.dataTransfer.setData("text", JSON.stringify(data));
+    }
+    function handleDragEnterLeave(e) {
+        if (e.type == "dragenter") {
+            this.className = "drag-enter";
+        } else {
+            this.className = "";
+        }
+    }
+    function handleOverDrop(e) {
+        e.preventDefault();
+        if (e.type != "drop") {
+            return;
+        }
+        var json = e.dataTransfer.getData("text");
+        var data = JSON.parse(json);
+        var draggedEl = document.getElementById(data.elementId);
+        if (draggedEl.parentNode == this) {
+            this.className = "";
+            return;
+        }
+        draggedEl.parentNode.removeChild(draggedEl);
+        this.appendChild(draggedEl);
+        this.className = "";
+        var num = Math.floor(Math.random() * (3));
+        if (num == 0)
+            alert(data.message1);
+        else if (num == 1)
+            alert(data.message2);
+        else
+            alert(data.message3);
+    }
+    var draggable = document.querySelectorAll("[draggable]");
+    var targets = document.querySelectorAll("[data-drop-target]");
+    for (var i = 0; i < draggable.length; i++) {
+        draggable[i].addEventListener("dragstart", handleDragStart);
+    }
+    for (i = 0; i < targets.length; i++) {
+        targets[i].addEventListener("dragover", handleOverDrop);
+        targets[i].addEventListener("drop", handleOverDrop);
+        targets[i].addEventListener("dragenter", handleDragEnterLeave);
+        targets[i].addEventListener("dragleave", handleDragEnterLeave);
+    }
+    </script>
+</body>
+</html>
