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


});