move js and css to their own directories

js/drag.js

@@ -0,0 +1,76 @@
+const stepSize = 100;
+const main = document.querySelector('main');
+const draggables = document.querySelectorAll(".draggable");
+const randomStarts = document.querySelectorAll(".randomStart");
+
+var zIndex = 2;
+
+activateDraggables();
+
+/**
+ * 
+ * @param {number} n 
+ * @returns {number}
+ */
+function stepedSize(n) {
+    return stepSize * Math.round(n / stepSize);
+}
+
+function move(e) {
+    e.preventDefault();
+    let target = e.target;
+    target.style['z-index'] = zIndex;
+    zIndex++;
+
+    target.moving = true;
+
+    target.setAttribute('data-moving', '1');
+
+    target.oldX = e.clientX;
+    target.oldY = e.clientY;
+
+    target.oldLeft = window.getComputedStyle(target).getPropertyValue('left').split('px')[0] * 1;
+    target.oldTop = window.getComputedStyle(target).getPropertyValue('top').split('px')[0] * 1;
+
+    document.addEventListener('mousemove', drag);
+
+    function drag(event) {
+        event.preventDefault();
+
+        if (!target.moving) {
+            return;
+        }
+        target.distX = event.clientX - target.oldX;
+        target.distY = event.clientY - target.oldY;
+
+        newLeft = target.oldLeft + target.distX;
+        newTop = target.oldTop + target.distY;
+        target.style.left = stepedSize(newLeft) + "px";
+        target.style.top = stepedSize(newTop) + "px";
+    }
+
+    function endDrag() {
+        target.moving = false;
+        target.setAttribute('data-moving', '0');
+    }
+    document.addEventListener('mouseup', endDrag)
+}
+
+function activateDraggables() {
+    for (var draggable of draggables) {
+        draggable.addEventListener('mousedown', move);
+    }
+}
+
+function randomizeDragables() {
+    maxX = main.offsetWidth - 150;
+    maxY = main.offsetHeight - 150;
+    for (var randomStart of randomStarts) {
+        randX = Math.floor(Math.random() * maxX);
+        randY = Math.floor(Math.random() * maxY);
+        randomStart.style.left = randX + "px";
+        randomStart.style.top = randY + "px";
+    }
+}
+
+document.addEventListener("DOMContentLoaded", randomizeDragables);