Как работать с быстро движущейся мышью, которая не вызывает событие mousemove

Question

Я пытаюсь создать простое поведение перетаскивания для элементов, используя события мыши и абсолютное позиционирование.

У меня есть прослушиватель событий mousemove для контейнера div, который меняет положение boxRef с помощью clientX и clientY свойств события мыши.

Работает нормально, когда движение мыши медленное, но когда оно быстрое, оно просто останавливается, Как я могу справиться с этим, чтобы элемент не останавливался независимо от скорости перемещения мыши?

const shadowStytle = "10px 10px 12px #888888";

const appRef = document.getElementById('app');
appRef.innerHTML = `<div class="box" id="box"></div>`;

const boxRef = document.getElementById("box");
const xOffset = boxRef.clientWidth / 2;
const yOffset = boxRef.clientHeight / 2;

let selectionLocked = false;

function lockSelection() {
  selectionLocked = true;
  boxRef.style.boxShadow = shadowStytle;
  boxRef.style.backgroundColor = "red";
}

function unlockSelection() {
  selectionLocked = false;
  boxRef.style.boxShadow = "none";
  boxRef.style.backgroundColor = "black";
}

unlockSelection();

boxRef.addEventListener("mousedown", (arg) => {
  lockSelection();
});

boxRef.addEventListener("mouseup", (arg) => {
  unlockSelection();
});

boxRef.addEventListener("mouseleave", (arg) => {
  if (selectionLocked) {
    selectionLocked = false;
    boxRef.style.boxShadow = "none";
  }
});

appRef.addEventListener("mousemove", (arg) => {
  if (selectionLocked) {
    boxRef.style.left = `${arg.clientX - xOffset}px`;
    boxRef.style.top = `${arg.clientY - yOffset}px`;
  }
});

.box {
  position: absolute;
  border: 1px solid black;
  padding: 25px;
  width: 10%;
}

<div id="app"></div>

Stackblitz

Answer 1

Вам не нужно mouseleave на элементе. Ваша проблема в том, что mouseleave срабатывает на элементе, и это прекращает ваше перетаскивание. Вместо этого воспользуйтесь всплывающим событием и добавьте ваш обработчик в достаточно большой родительский контейнер или в window. Запустите mouseup в окне / контейнере тогда и только тогда, когда было предварительно активировано с помощью mousedown. Если вы хотите, вы также можете удалить и заново прикрепить обработчик в окне к mousedown элемента, если вы хотите сохранить некоторые вычисления. Но я оставил это:

https://jsfiddle.net/ibowankenobi/gd1e93a3/1/

const shadowStytle = "10px 10px 12px #888888";

const appRef = document.getElementById('app');
appRef.innerHTML = `<div class="box" id="box"></div>`;

const boxRef = document.getElementById("box");
const xOffset = boxRef.clientWidth / 2;
const yOffset = boxRef.clientHeight / 2;

let selectionLocked = false;

function lockSelection() {
  selectionLocked = true;
  boxRef.style.boxShadow = shadowStytle;
  boxRef.style.backgroundColor = "red";
}

function unlockSelection() {
  selectionLocked = false;
  boxRef.style.boxShadow = "none";
  boxRef.style.backgroundColor = "black";
}

unlockSelection();

boxRef.addEventListener("mousedown", (arg) => {
  lockSelection();
});

window.addEventListener("mouseup", (arg) => {
  selectionLocked && unlockSelection();
});

boxRef.addEventListener("mouseleave", (arg) => {
  /*if (selectionLocked) {
    selectionLocked = false;
    boxRef.style.boxShadow = "none";
  }*/
});

window.addEventListener("mousemove", (arg) => {
  if (selectionLocked) {
    boxRef.style.left = `${arg.clientX - xOffset}px`;
    boxRef.style.top = `${arg.clientY - yOffset}px`;
  }
});