I have been experimenting with the ngx-file-drop module for Angular 4.
Lately, I have been working on adding a file drop feature to a website that displays data in a table using *ngFor and *ngIf directives. My goal was to create a background drop zone behind the table, of the same size, that only becomes visible when an item is dragged into it. I wanted the drop zone to be indicated by a dotted border. However, I encountered a problem where the dragover event triggered multiple change events, causing the site to load slowly as the data in the table kept reloading.
On my second attempt: I tried making the table invisible (another *ngIf directive) when an item is dragged into the zone to reduce loading items. It seemed to work until I realized that I had positioned the "drop-zone-div" element as absolute, making the table contents, including buttons, inaccessible and unclickable.
Does anyone have suggestions on how to overcome the issues I faced during my first or second attempts?
https://i.sstatic.net/NOkZC.jpg Ideally, I want the functionality to mimic the drag and drop feature seen in Jira..