77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
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);
|