İstemci son kaldırma etkinliğinde neden istemci sıfırlanıyor?

Question

Öğeleri bir satıra sürüklemeye çalışıyorum. Birbirlerini zorlamalılar, üstünden ya da altından geçmemeli.

Gölgeli bir öğeyi sürüklemenin etrafında yüzmekten kaçınmak için, bir alt sekmeyi sürüklerim ki bu da dış divın konumunu etkiler. İstemciX = 0 ile son bir sürükle-etkinliğini tetikleyen fareyi serbest bırakma dışında iyi çalışır!

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

Bu neden olduğunu ve Yeniden Yerleşim önlemek için ne yapabilirim onu?

Answer 1

Varsayılan olarak, diğer öğelerdeki veriler/öğeler bırakılamaz. Bir düşüşe izin vermek için, dragover olduğunda öğenin varsayılan işlemesini önlemelisiniz.

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

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

}, false);