Alena

let d = document;

document.addEventListener('DOMContentLoaded', () => {

    let tiles = document.querySelector('.tiles');
    if (tiles) {

        for (let n = 0; n < tiles.children.length; n++) {
            for (let k = 0; k < tiles.children[n].children.length; k++) {

                let tile = tiles.children[n].children[k];

                tile.addEventListener('mousedown', (ev) => {
                    console.log('mouse down');
                    console.log(ev);


                    let offsetX = ev.pageX - tiles.offsetLeft;
                    let offsetY = ev.pageY - tiles.offsetTop;

                    let mouseMove = (ev) => {
                        console.log('mouse move');
                        console.log(ev);
                        tiles.style.top = ev.pageY - offsetY + 'px';
                        tiles.style.left = ev.pageX - offsetX + 'px';

                        if (tiles.offsetTop < 0) {
                            tiles.style.top = '0px';
                        }

                        if (tiles.offsetLeft < 0) {
                            tiles.style.left = '0px';
                        }

                    };

                    d.addEventListener('mousemove', mouseMove);

                    d.addEventListener('mouseup', () => {
                        console.log('mouse up')
                        d.removeEventListener('mousemove', mouseMove);
                    });
                });

                console.log(tile);

                tile.style.position = "absolute";

                tile.style.top = Math.floor((Math.random() * (600 - 50)) + 50) + 'px';
                tile.style.left = Math.floor((Math.random() * (600 - 50)) + 50) + 'px';
            }
        }
    }
});