<div class='container'> <div class='move bg1'>1</div> <div class='move bg2'>2</div> <div class='move bg3'>3</div> <div class='move bg4'>4</div> </div>
var elementSelected; var mouseX, mouseY; document.querySelectorAll(".move").forEach( function(element,index) { element.style.left = 400; element.addEventListener('mousedown', function(event) { elementSelected = element; mouseX = event.clientX - parseInt(getComputedStyle(elementSelected).left); mouseY = event.clientY - parseInt(getComputedStyle(elementSelected).top); // move this element to top layer // document.querySelector(".container").appendChild(elementSelected); }) }); document.addEventListener('mousemove', function(event) { if(elementSelected!==undefined) { elementSelected.style.left = event.clientX - mouseX + 'px'; elementSelected.style.top = event.clientY - mouseY + 'px'; } }); document.addEventListener('mouseup', function(event) { elementSelected = undefined; });
.move { width: 100px; height: 100px; margin: 5px; background: lightblue; text-align: center; overflow-y: auto; position: absolute; cursor: move; } .move.bg1 { background: lightgray; top: 50px; left: 100px; } .move.bg2 { background: lightblue; top: 80px; left: 160px; } .move.bg3 { background: pink; top: 50px; left: 220px; } .move.bg4 { background: lightgreen; top: 80px; left: 280px; }