Tại sao clientX đặt lại thành 0 trên kéo-sự kiện cuối cùng?

Question

Tôi đang cố kéo các phần tử dọc theo một dòng. Họ nên đẩy nhau, không vượt qua hoặc dưới.

Để tránh việc có yếu tố bóng râm trôi nổi khi kéo, tôi kéo một div phụ, từ đó ảnh hưởng đến vị trí của div ngoài. Hoạt động tốt trừ khi bạn nhả chuột kích hoạt sự kiện kéo cuối cùng với 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; 
    } 

Các 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); 

Tại sao điều này và những gì tôi có thể làm gì để tránh resett ing nó?

Answer 1

Theo mặc định, dữ liệu/yếu tố không thể bị xóa trong các phần tử khác. Để cho phép thả, bạn phải ngăn chặn việc xử lý mặc định của phần tử khi kéo.

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

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

}, false);