Perché clientX è stato reimpostato su 0 all'ultimo evento di trascinamento?

Question

Sto provando a trascinare elementi lungo una linea. Dovrebbero spingersi l'un l'altro, non attraversare o meno.

Per evitare che un elemento ombreggiato fluttui sulla resistenza, trascino un sub-div che a sua volta influenza la posizione del div esterno. Funziona bene tranne quando si rilascia il mouse che attiva un ultimo evento di trascinamento con clientX = 0!?!

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

Il codice HTML:

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

    <div class="box2"> 
    </div 

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

Il 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); 

Perché è questo e che cosa posso fare per evitare la re ing?

Answer 1

Per impostazione predefinita, i dati/elementi non possono essere eliminati in altri elementi. Per consentire un rilascio, è necessario impedire la gestione predefinita dell'elemento durante il trascinamento.

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

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

}, false);