Почему clientX reset равен 0 при последнем событии перетаскивания?

Я пытаюсь перетаскивать элементы вдоль строки. Они должны подталкивать друг друга, а не пересекаться или под ним.

Чтобы избежать теневого элемента float вокруг при перетаскивании, я перетаскиваю суб-div, который, в свою очередь, влияет на положение внешнего div. Прекрасно работает, кроме случаев, когда вы отпускаете мышь, которая вызывает последнее событие drag-события с clientX = 0!?!

http://codepen.io/primavera133/pen/EKvbYV

HTML:

    <div class="box" >
      <div class="box-inner" draggable="true"></div>
    </div>

    <div class="box2">
    </div

CSS:

    .box {
      width: 50px;
      height: 50px;
      background-color: hotpink;
      position: absolute;
      top: 0;
      left: 0;

    }

    .box-inner {
      width: 100%;
      height: 100%;

    }

    .box2 {
      width: 50px;
      height: 50px;
      background-color: rebeccapurple;
      position: absolute;
      left: 200px;
      top: 0;
    }

JS:

var b = document.querySelector('.box');
var bi = document.querySelector('.box-inner');
var b2 = document.querySelector('.box2');

bi.addEventListener('dragstart', function(){
  console.log("dragstart")
}, false);

bi.addEventListener('drag', function(event){
  bLeft = event.clientX;
  b2Left = b2.offsetLeft;
  b.style.left = bLeft + "px";
  if(b2Left-50 <= bLeft){
    b2.style.left = (bLeft + 50) + "px";
  }

  console.log("drag", event.clientX, event.target.offsetParent.offsetLeft, b2.offsetLeft);

}, false);

bi.addEventListener('dragend', function(){
  console.log("dragend")
}, false);

Почему это и что я могу сделать, чтобы избежать его сброса?

Ответ 1