为什么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);

为什么这样做,我该怎么做才能避免重置它？

Answer 1

默认情况下,不能在其他元素中删除数据/元素.要允许删除,您必须在dragover时阻止元素的默认处理.

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

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

}, false);

Answer 2

我只是忽略了最后一个事件。不知道为什么会发出来

// in `drag` event handler
  if (event.screenX === 0) {
    return;
  }

请注意，您应该screenX在此处使用。当用户放大页面时，clientX将是一个正值但不为零。