При перетаскивании по абсолютному элементу событие перетаскивания было запущено непрерывно

Question

Мы используем абсолютный элемент позиции как дочерний элемент относительного элемента позиции в нашем приложении. Мы использовали события перетаскивания javascript для наших пользовательских функций.

Выпуск:

При перетаскивании файлов на абсолютный элемент он колебался.

Образец: https://stackblitz.com/edit/typescript-avv5u1?file=index.ts

Шаги для воспроизведения:

1. Перетащите любые файлы, чтобы отбросить цель.

2.При наведении на цель абсолютный элемент будет отображаться с желтым фоном.

3. Наведите перетаскиваемый файл над желтой областью. Теперь желтый, регион будет колебаться.

Подскажите, пожалуйста, как я могу решить эту проблему на нашей стороне?

Answer 1

CSS Solution

Отключить события указателя для всех дочерних элементов родительского объекта перетаскивания.

#droptarget * {
  pointer-events: none;
}

CodeSandbox

Answer 2

Рассмотрите возможность отмены и регулирования вашего обработчика событий.Добавление базовой реализации.

  let droptarget = document.getElementById('droptarget');
    droptarget.addEventListener('dragover', function(e: any) {
        droptarget.classList.add('drag-hover');
        e.preventDefault();
        e.stopPropagation();
    })

    var eventThrottled = false;

    function dragHandler() {
      if(eventThrottled) {
          return;
        }
      droptarget.classList.remove('drag-hover');
      eventThrottled = true;
      setTimeout(()=>{eventThrottled = false;},2000);
    }

    droptarget.addEventListener('dragleave', dragHandler);

Это отключает обработчик на 2000 мс.