Я пытаюсь сделать Drag'n'Drop с подсветкой места, куда будет брошен предмет.
Когда происходит событие onDragOver
, я выполняю некоторые вычисления, поэтому в основном эти вычисления выполняются каждый раз, когда пользователь перемещает указатель мыши, поскольку место отбрасывания также зависит от относительного положения указателя на элемент, над которым перетаскивается указатель.
Вопрос в том, что происходит, когда вызывается следующий onDragOver
, но предыдущий все еще вычисляет вещи?
Вот пример моей проблемы https://stackblitz.com/edit/angular-njenrg
По сути, я устанавливаю класс для элемента, поверх которого перетаскивается другой элемент, и на dragLeave
я удаляю класс.
Я моделирую некоторые дорогостоящие вычисления, выполняя это:
const arr = [];
for (let i = 0; i < 100000; i++) {
arr.push(Math.pow(Math.random() * 100 + 1,100));
}
Попробуйте переместить элементы один над другими на некоторое время, и вы заметите, что когда вы уроните элемент, вы все равно увидите, что у некоторых элементов есть красная рамка. Это означает, что dragLeave
не был выполнен для этих элементов.
Я хочу спросить вас, есть ли способ отменить предыдущий расчет, если начнется новый, поэтому dragLeave
будет выполнен вовремя?