Блог

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

Проблема :

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

Пример: https://stackblitz.com/edit/typescript-avv5u1?file=index.ts

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

1. Перетащите любые файлы в drop target.

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

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

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

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

   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 мс.

Решение CSS

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

 #droptarget * {
  pointer-events: none;
}
  

CodeSandbox