在 Javascript 中触发“dragstart”后鼠标事件侦听器不工作

Question

我目前正在开发拖放界面，想实现一个功能，允许用户通过右键单击将拖动的对象返回到其原始位置。

在下面的演示中，可以将蓝色球拖到3个盒子中的任何一个。我为右键单击 mouseup 事件添加了一个事件监听器。

期望的结果：

任何时候当我拖动球时，单击鼠标右键将结束拖动事件并将球返回到它被拖动的原始方块。

实际结果：

当我拖动球时，单击鼠标右键没有任何作用。只有在我放下球后，右键单击才能将球返回到原来的方块。

识别出的潜在问题

经过测试，这个问题可能是由于在“拖动”阶段额外的鼠标事件监听器没有激活。我该怎么办？

代码

const boxes = document.getElementsByClassName("box");
const ball = document.getElementById("ball");

for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("dragover", function(event) {
    event.preventDefault();
  });
  boxes[i].addEventListener("drop", function(event) {
    event.preventDefault();
    this.appendChild(ball);
  });
}

var originalBox;
ball.setAttribute("draggable", true);
ball.addEventListener("dragstart", function(event) {
  originalBox = ball.closest(".box");
});

document.addEventListener('mouseup', (event) => {
  // (event.button === 2) checks if the right mouse button was clicked
  if (event.button === 2) {
    originalBox.appendChild(ball);
  }
});

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#ball {
  width: 90px;
  height: 90px;
  border-radius: 100%;
  background-color: DodgerBlue;
}

<div class="box">
  <div id="ball"></div>
</div>
<div class="box">
</div>
<div class="box">
</div>

Answer 1

解决问题的一种方法是使用标志变量来跟踪球是否被拖动。

当右键事件被触发时，可以通过检查flag变量来判断球当前是否被拖动，如果是，则可以将其放回原框。

试试这个代码。

const boxes = document.getElementsByClassName("box");
const ball = document.getElementById("ball");

let isDragging = false; // Flag variable to keep track of whether the ball is being dragged
let originalBox;

for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("dragover", function(event) {
    event.preventDefault();
  });
  boxes[i].addEventListener("drop", function(event) {
    event.preventDefault();
    this.appendChild(ball);
    isDragging = false; // Reset the flag variable when the ball is dropped
  });
}

ball.setAttribute("draggable", true);
ball.addEventListener("dragstart", function(event) {
  originalBox = ball.closest(".box");
  isDragging = true; // Set the flag variable when the ball is being dragged
});

document.addEventListener('mouseup', (event) => {
  // (event.button === 2) checks if the right mouse button was clicked
  if (event.button === 2) {
    if (isDragging) {
      originalBox.appendChild(ball);
      isDragging = false; // Reset the flag variable when the ball is returned to the original box
    }
  }
});

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#ball {
  width: 90px;
  height: 90px;
  border-radius: 100%;
  background-color: DodgerBlue;
}

<div class="box">
  <div id="ball"></div>
</div>
<div class="box">
</div>
<div class="box">
</div>