move DOM element and make it top

HTML

<div class='container'>
<div class='move bg1'><iframe width="560" height="315" src="https://www.youtube.com/embed/BV9uRuYL0go" frameborder="0" allowfullscreen></iframe></div>
  <div class='move bg2'>2</div>
  <div class='move bg3'>3</div>
  <div class='move bg4'>4</div>
</div>

CSS

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

JavaScript

var elementSelected;
var mouseX, mouseY;
//var zIndex = 0;
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
    //elementSelected.style['z-index'] = ++zIndex;
    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;
});