CODEWITHSUNDEEP
angularevent-listener
AOUADI Slim
AOUADI Slim

Reputation: 457

@HostListener not working in a proper way

i created a drag event listener using the HostListener to check whether the element is being dragged inside the browser window or outside of it , so when the element is dragged inside the browser window it shows me a div " drop zone " written inside of it drop your files here and when i leave the browser window i want that div to disappear.

my 2 event listeners : 

displayDropZone: boolean = false;

  @HostListener('window:dragenter', ['$event'])
  onDragEnter() {
   console.log(" DRAG ENTER")
   this.displayDropZone = true;
 }

  @HostListener('window:dragleave', ['$event'])
   onDragLeave() {
    console.log(" DRAG LEFT")
    this.displayDropZone = false;
 }

the div to be displayed depending on the drag event : 

           <div *ngIf="displayDropZone" style="background-color: black;" id="dropzone" 
                  (dragover)="false"
                (dragend)="false" (drop)="handleDrop($event)">
                <p style="margin: 16%; text-align: center"> <strong>Drop Your Images Here</strong> 
           </p>
            </div>

so the problem is that the div keeps being displayed and hidden at the same time and the drag event is not working in the correct way because when the dragged element is still in the browser window it says DRAG LEFT which i don't know why it's happening even though i didn't leave the browser window

Upvotes: 0

Views: 3448

Answers (1)

onik
onik

Reputation: 1631

It seems that the window drag leave event is called if you hover an item to the displayDropZone element, so you need to add the condition on dragleave event

  @HostListener("window:dragleave", ["$event"])
  onDragLeave(e) {
    if (!e.fromElement) {  // this will ensure that you are not in the browser anymore
      console.log(" DRAG LEFT");
      this.displayDropZone = false;
    }
  }

Upvotes: 1

Related Questions