最後のドラッグイベントでclientXが0にリセットされるのはなぜですか？

Question

私は要素を線に沿ってドラッグしようとしています。彼らはお互いを押したり、交差したり下にしたりしないでください。

ドラッグで浮遊する要素が浮かないようにするには、外側のdivの位置に影響を与えるサブdivをドラッグします。 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); 

なぜこれがあると私はresettを避けるために何ができますそれは？

Answer 1

デフォルトでは、データ/要素を他の要素にドロップすることはできません。ドロップを許可するには、dragoverを実行するときに要素のデフォルト処理を行わないようにする必要があります。

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

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

}, false);