While drag over the absolute element, drag leave event has been trigger continuously

Question

We are using the position absolute element as a child of position relative element in our application. We have used the javascript drag and drop events for our custom functions.

Issue :

While drag the files over the absolute element it fluctuated.

Sample: https://stackblitz.com/edit/typescript-avv5u1?file=index.ts

Steps to reproduce:

1.Drag any files in to drop target.

2.While you are hovering over the target, absolute element will be displays with yellow background.

3.Hover the dragged file over the yellow region. Now yellow, region will fluctuate.

Can you please suggest how can i resolve this issue in our side?

Answer 1

Consider debouncing and throttling your event handler. Adding basic implementation.

  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);

This disables the handler for 2000ms.

Answer 2

CSS Solution

Disable pointer-events for all children of the drop target parent.

#droptarget * {
  pointer-events: none;
}

CodeSandbox