tripolskypetr/dragAndDropPerformance.html

## dragAndDropPerformance.html
<!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>
	<!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>