为什么在最后一个拖动事件中 clientX 重置为 0 以及如何解决它？

Question

我正在尝试沿一条线拖动元素。他们应该互相推动，而不是越过或越过。

为了避免在拖动时有阴影元素浮动，我拖动了一个子 div，然后影响外部元素的位置。工作正常，除非您释放鼠标，触发最后一个拖动事件，clientX 等于 0（请参阅CodePen）！

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) {
  const bLeft = event.clientX;
  const 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);

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

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

<div class="box2"></div>

为什么会这样？我可以做些什么来避免重置它？

Answer 1

默认情况下，数据/元素不能放在其他元素中。要允许放置，您必须在拖动时阻止元素的默认处理。

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

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

}, false);