You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
function randomPos(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
|
|
}
|
|
|
|
let w = document.body.clientWidth
|
|
let y = document.body.clientHeight - document.querySelector('footer').clientHeight
|
|
let x_start = document.querySelector('header').clientHeight
|
|
|
|
document.querySelectorAll('.draggable').forEach(div => {
|
|
|
|
div.style.left = randomPos(0,w)+'px'
|
|
div.style.top = randomPos(x_start,y)+'px'
|
|
|
|
|
|
div.onmousedown = function(event) {
|
|
let shiftX = event.clientX - div.getBoundingClientRect().left;
|
|
let shiftY = event.clientY - div.getBoundingClientRect().top;
|
|
|
|
function moveAt(pageX, pageY) {
|
|
div.style.left = pageX - shiftX + 'px';
|
|
div.style.top = pageY - shiftY + 'px';
|
|
}
|
|
|
|
function onMouseMove(event) {
|
|
moveAt(event.pageX, event.pageY);
|
|
}
|
|
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
|
|
div.onmouseup = function() {
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
div.onmouseup = null;
|
|
};
|
|
|
|
div.ondblclick = function() {
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
};
|
|
};
|
|
|
|
div.ondragstart = function() {
|
|
return false;
|
|
};
|
|
|
|
|
|
}); |