tripolskypetr · January 4, 2020 21:46 · Jan 4, 2020
diff --git a/dragAndDropPerformance.html b/dragAndDropPerformance.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Drag and drop</title>
+    <style>
+      .red { background-color: red; }
+      .green { background-color: green; }
+      .blue { background-color: blue; }
+      .root { position: fixed; }
+      .box {
+        display: flex;
+        align-items: stretch;
+        justify-content: stretch;
+        padding: 2px;
+      }
+      .box > * {
+        flex: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      (function() {
+        const generateDraggable = (side = 500) => {
+          const root = document.createElement('div');
+          root.className = "red box root";
+          [root.style.height, root.style.width] = new Array(2).fill(`${side}px`);
+          let parent = root;
+          for (let i = 0; i !== parseInt(side / 4); i += 1) {
+            const child = document.createElement('div');
+            const color = i % 2 === 0 ? 'red' : i % 3 === 0 ? 'green' : 'blue';
+            child.className = `${color} box`;
+            parent.appendChild(child);
+            parent = child;
+          }
+          document.body.appendChild(root);
+          document.addEventListener('mousemove', (e) => {
+            const [x, y] = [e.clientX, e.clientY];
+            [root.style.top, root.style.left] = [`${y}px`, `${x}px`];
+            console.log(x, y);
+          });
+        };
+        generateDraggable();
+      })();
+    </script>
+  </body>
+</html>