Установка зоны размещения файлов за таблицей, заполненной данными

Question

Я использую модуль ngx-file-drop для угловых 4.

В последние несколько дней я пытался добавить возможность удаления файлов на веб-сайт.На сайте отображаются данные в виде таблицы.Многие вещи загружаются с * ngFor и * ngIf.Я хотел, чтобы зона перетаскивания находилась на заднем плане (за столом, но такого же размера, как и таблица).Зона высадки должна появляться только в том случае, если что-то было перетащено в зону.Drop-зона должна быть только пунктирной границей вокруг drop-зоны.Моя проблема заключалась в том, что событие dragover вызвало сотни событий изменений на сайте, а также данные в таблице и заголовок, который мы загружали снова и снова ... Так что сайт работал очень, очень медленно ...

Вторая попытка: Поэтому я решил сделать таблицу невидимой (снова * ngIf), если что-то перетащить в зону -> меньше вещей для загрузки.Работал, пока не заметил, что я установил «drop-zone-div» как абсолютный.Таким образом, данные в таблице (также кнопки) не были доступны, соответственно не активированы.

У кого-нибудь есть идеи, как решить мою проблему с первой или второй попытки?

Это должно работать как перетаскивание джира.

Answer 1

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

С помощью некоторого JavaScript я вычисляю необходимый размер для заполнителя.

const myElement = document.getElementByClassName('class-name')[0];

const height = myElement.clientHeight;