Add drag and drop effect test.

sanketj · Dec 12, 2023 · 0f4ed74 · 0f4ed74
1 parent 7f1d931
commit 0f4ed74
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/drag-and-drop-effect.html b/drag-and-drop-effect.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      div {
+        margin: 0em;
+        padding: 2em;
+      }
+
+      #source {
+        color: blue;
+        border: 1px solid black;
+      }
+
+      #target {
+        border: 1px solid black;
+      }
+    </style>
+  </head> 
+  <body>
+    <div>
+      <p id="source" ondragstart="dragstart_handler(event);" draggable="true">draggable</p>
+    </div>
+    <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+    <script>
+      function dragstart_handler(ev) {
+        document.body.append(`dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, document.createElement('br'));
+
+        // Add this element's id to the drag payload so the drop handler will
+        // know which element to add to its tree
+        ev.dataTransfer.setData("text", ev.target.id);
+        ev.dataTransfer.effectAllowed = "move";
+      }
+
+      function dragover_handler(ev) {
+        document.body.append(`dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, document.createElement('br'));
+        ev.preventDefault();
+        // Set the dropEffect to move
+        ev.dataTransfer.dropEffect = "move";
+      }
+
+      function drop_handler(ev) {
+        document.body.append(`drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, document.createElement('br'));
+        ev.preventDefault();
+
+        // Get the id of the target and add the moved element to the target's DOM
+        const data = ev.dataTransfer.getData("text");
+        ev.target.appendChild(document.getElementById(data));
+      }
+    </script>
+  </body>
+</html>