Я пытаюсь перетаскивать элементы вдоль строки. Они должны подталкивать друг друга, а не пересекаться или под ним.
Чтобы избежать теневого элемента 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);
Почему это и что я могу сделать, чтобы избежать его сброса?