Javascript move all childs inside div element

Question

I'm trying to create a simple drag function that moves all childs inside a div tag depending on mouse movement, in simple world I calculate deltaX and deltaY and apply those to all childs inside a div by changing style.top and style.left. As regarding the X coordinate it works well while Y doesn't work (only increase) and I cannt explain why. This is what I have done

//Make the DIV element draggagle:
dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var deltaX = 0, deltaY = 0, initX = 0, initY = 0;
  var flag=true;
  elmnt.onmousedown = dragMouseDown;


  var childrens;
  function dragMouseDown(e) {
    e = e || window.event;
    //console.log("dragMouseDown: "+e.clientX+" "+e.clientY);
    
    childrens = document.getElementById("mydiv").querySelectorAll(".child");
    
    // get the mouse cursor position at startup:
    initX = e.clientX;
    initY = e.clientY;
    document.onmouseup = closeDragElement;
	
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {

    if(flag){
		flag=false;
		
		e = e || window.event;
			
		// calculate the new cursor position:
		deltaX = e.clientX-initX;
		deltaY = e.clientY-initY;

		console.log("deltaX: "+deltaX+" deltaY: "+deltaY);
		
		
		for (var i = 0; i < childrens.length; i++) {
		
			//console.log("childrens[i].offsetTop: "+childrens[i].offsetTop+" childrens[i].offsetLeft: "+childrens[i].offsetLeft);
			childrens[i].style.top = (childrens[i].offsetTop + deltaY) + "px";	// dont work (only increase)
			childrens[i].style.left = (childrens[i].offsetLeft + deltaX) + "px";
		}
		
		initX = e.clientX;
		initY = e.clientY;
		deltaX=0;
		deltaY=0;
		
		flag=true;
	}

  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv {
    position: fixed;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
	width:400px;
	height:400px;
    border: 1px solid #d3d3d3;
}

.child {
	position: relative;
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Draggable DIV Element</h1>

<p>Click and hold the mouse button down while moving the DIV element</p>

<div id="mydiv" style="background-color:blue">
  <p class="child" style="background-color:red">Move 1</p>
</div>

Answer 1

Try something like this:

dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var deltaX = 0,
    deltaY = 0,
    initX = 0,
    initY = 0;
  var flag = true;
  elmnt.onmousedown = dragMouseDown;

  var childrens;


  function dragMouseDown(e) {
    e = e || window.event;
    childrens = document.getElementById("mydiv").querySelectorAll(".child");

    for (var i = 0; i < childrens.length; i++) {
      childrens[i].style.top = childrens[i].style.top == "" ? "0px" : childrens[i].style.top;
      childrens[i].style.left = childrens[i].style.left == "" ? "0px" : childrens[i].style.left;
    }

    initX = e.clientX;
    initY = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    if (flag) {
      flag = false;

      e = e || window.event;

      deltaX = e.clientX - initX;
      deltaY = e.clientY - initY;

      for (var i = 0; i < childrens.length; i++) {
        childrens[i].style.top = parseInt(childrens[i].style.top) + deltaY + "px";
        childrens[i].style.left = parseInt(childrens[i].style.left) + deltaX + "px";
      }

      initX = e.clientX;
      initY = e.clientY;

      flag = true;
    }
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv {
  position: fixed;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  width: 400px;
  height: 400px;
  border: 1px solid #d3d3d3;
}

.child {
  position: relative;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<h1>Draggable DIV Element</h1>

<p>Click and hold the mouse button down while moving the DIV element</p>

<div id="mydiv" style="background-color:blue">
  <p class="child" style="background-color:red">Move 1</p>
  <p class="child" style="background-color:yellow">Move 2</p>
</div>

This isn't a nice solution but it works. Consider using jQuery and jQuery Draggable.