drap and drop feature using vanilla js.

lgope · lgope · commit 323e78deba7c · 2020-03-17T22:48:18.000+06:00
diff --git a/drag-drop/index.html b/drag-drop/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+    <title>Drag & Drop</title>
+</head>
+
+<body>
+
+</body>
+<div class="container">
+    <p class="draggable" draggable="true">1</p>
+    <p class="draggable" draggable="true">2</p>
+</div>
+
+<div class="container">
+    <p class="draggable" draggable="true">3</p>
+    <p class="draggable" draggable="true">4</p>
+</div>
+
+</html>
diff --git a/drag-drop/script.js b/drag-drop/script.js
@@ -0,0 +1,44 @@
+const draggables = document.querySelectorAll('.draggable');
+const containers = document.querySelectorAll('.container');
+
+draggables.forEach(draggable => {
+  draggable.addEventListener('dragstart', () => {
+    draggable.classList.add('dragging');
+  });
+
+  draggable.addEventListener('dragend', () => {
+    draggable.classList.remove('dragging');
+  });
+});
+
+containers.forEach(container => {
+  container.addEventListener('dragover', e => {
+    e.preventDefault();
+    const afterElement = getDragAfterElement(container, e.clientY);
+    const draggable = document.querySelector('.dragging');
+    if (afterElement == null) {
+      container.appendChild(draggable);
+    } else {
+      container.insertBefore(draggable, afterElement);
+    }
+  });
+});
+
+function getDragAfterElement(container, y) {
+  const draggableElements = [
+    ...container.querySelectorAll('.draggable:not(.dragging)')
+  ];
+
+  return draggableElements.reduce(
+    (closest, child) => {
+      const box = child.getBoundingClientRect();
+      const offset = y - box.top - box.height / 2;
+      if (offset < 0 && offset > closest.offset) {
+        return { offset: offset, element: child };
+      } else {
+        return closest;
+      }
+    },
+    { offset: Number.NEGATIVE_INFINITY }
+  ).element;
+}
diff --git a/drag-drop/style.css b/drag-drop/style.css
@@ -0,0 +1,20 @@
+body {
+  margin: 0;
+}
+
+.container {
+  background-color: #333;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.draggable {
+  padding: 1rem;
+  background-color: white;
+  border: 1px solid black;
+  cursor: move;
+}
+
+.draggable.dragging {
+  opacity: 0.5;
+}
