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);
});