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.
43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
function getRandomPosition(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
const bodyWidth = document.body.clientWidth;
|
|
const bodyHeight = document.body.clientHeight - document.querySelector('footer').clientHeight;
|
|
const headerHeight = document.querySelector('header').clientHeight;
|
|
let currentZIndex = 1; // Initialize a variable to keep track of the highest z-index
|
|
|
|
document.querySelectorAll('.draggable').forEach(draggable => {
|
|
draggable.style.left = `${getRandomPosition(0, bodyWidth)}px`;
|
|
draggable.style.top = `${getRandomPosition(headerHeight, bodyHeight)}px`;
|
|
|
|
draggable.addEventListener('mousedown', (event) => {
|
|
draggable.style.zIndex = ++currentZIndex; // Set the z-index to a higher value
|
|
|
|
const shiftX = event.clientX - draggable.getBoundingClientRect().left;
|
|
const shiftY = event.clientY - draggable.getBoundingClientRect().top;
|
|
|
|
function moveAt(pageX, pageY) {
|
|
draggable.style.left = `${pageX - shiftX}px`;
|
|
draggable.style.top = `${pageY - shiftY}px`;
|
|
}
|
|
|
|
function onMouseMove(event) {
|
|
moveAt(event.pageX, event.pageY);
|
|
}
|
|
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
|
|
draggable.addEventListener('mouseup', () => {
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
}, { once: true });
|
|
|
|
draggable.addEventListener('dblclick', () => {
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
}, { once: true });
|
|
|
|
});
|
|
|
|
draggable.addEventListener('dragstart', () => false);
|
|
});
|