Dlaczego klient jest zresetowany do 0 na ostatnim zdarzeniu przeciągania?

Question

Próbuję przeciągnąć elementy wzdłuż linii. Powinny się nawzajem napierać, nie przechodzić ani nie przechodzić.

Aby uniknąć sytuacji, w której po przeciągnięciu pojawia się zacieniony element, przeciągam element podrzędny, który z kolei wpływa na położenie zewnętrznego elementu div. Działa dobrze, z wyjątkiem sytuacji, gdy zwolnisz mysz, która wyzwala ostatnie zdarzenie przeciągania z 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); 

Dlaczego to jest i co można zrobić, aby uniknąć relokacja to?

Answer 1

Domyślnie danych/elementów nie można upuścić w innych elementach. Aby pozwolić na upuszczenie, musisz zapobiec domyślnej obsłudze elementu podczas dragovera.

document.addEventListener("dragover", function(event) { 

    // prevent default to allow drop 
    event.preventDefault(); 

}, false);