Mouse event listeners not working after 'dragstart' is fired in Javascript

I am currently developing a drag and drop interface and would like to implement a feature that allows users to return a dragged object to its original position by right-clicking.

In the demo below, the blue ball can be dragged to any of the 3 boxes. I added an event listener for a right-click mouseup event.

Desired outcome:

Anytime when I am dragging the ball, a right mouse click will end the drag event and return the ball to the original square it was dragged from.

Actual outcome:

When I am dragging the ball, a right mouse click does nothing. Only after I drop the ball does a right-click return the ball to the original square.

Potential problem identified

After testing, this issue may be due to the fact that additional mouse event listeners are not active during the 'dragging' phase. What should I do?

Code

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>

from Mouse event listeners not working after 'dragstart' is fired in Javascript