I'm trying to implement a drag/drop uploader that marks the dropzone with an overlay (100% width / height absolute element inside the dropzone, looks great when static) when a file is dragged into the window, and removes that marking when the file leaves the window or is dropped outside the dropzone.

The issue is that when the file is dragged into the window, dragover and dragleave events fire like crazy, and the overlay thus flashes in and out like crazy.

window.addEventListener('dragover', handleDrag, false);
window.addEventListener('dragleave', handleStop, false);
window.addEventListener('drop', handleStop, false);
dropzone.addEventListener('drop', handleUpload, false);

function handleDrag(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (!window.mysettings.dragging) {
    window.mysettings.dragging = true;
    $('#dropzone').prepend('<div class="overlay">HELLO</div>');
  }
}

function handleStop(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (window.mysettings.dragging) {
    window.mysettings.dragging = false;
    $('#dropzone .overlay').remove();
  }
}

function handleUpload(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (window.mysettings.dragging) {
    window.mysettings.dragging = false;
    $('#dropzone .overlay').remove();
  }

  // DO MY FILE UPLOAD STUFF HERE
}

I'm trying to implement a drag/drop uploader that marks the dropzone with an overlay (100% width / height absolute element inside the dropzone, looks great when static) when a file is dragged into the window, and removes that marking when the file leaves the window or is dropped outside the dropzone.

The issue is that when the file is dragged into the window, dragover and dragleave events fire like crazy, and the overlay thus flashes in and out like crazy.

window.addEventListener('dragover', handleDrag, false);
window.addEventListener('dragleave', handleStop, false);
window.addEventListener('drop', handleStop, false);
dropzone.addEventListener('drop', handleUpload, false);

function handleDrag(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (!window.mysettings.dragging) {
    window.mysettings.dragging = true;
    $('#dropzone').prepend('<div class="overlay">HELLO</div>');
  }
}

function handleStop(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (window.mysettings.dragging) {
    window.mysettings.dragging = false;
    $('#dropzone .overlay').remove();
  }
}

function handleUpload(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (window.mysettings.dragging) {
    window.mysettings.dragging = false;
    $('#dropzone .overlay').remove();
  }

  // DO MY FILE UPLOAD STUFF HERE
}

• javascript
• jquery
• html
• dom

• Wouldn't you want dragenter instead of dragover? – Christian Commented Dec 22, 2012 at 23:52
• Perhaps. I swapped over to dragenter and the same issue occurs, albeit with less 'flashing'. – obrienmd Commented Dec 26, 2012 at 20:46
• The base problem is that dragLeave is fired when the element bees visible. I also have the problem and tried it with adding styles instead of adding and removing the overlay element, but with no luck. – ohcibi Commented Apr 6, 2015 at 12:46
• May you create a jsfiddle with your code? – alebruck Commented May 14, 2015 at 3:08

2 Answers 2

http://jsbin./zabeqigefi/1/edit?css,js,output

Hey,

what's actually going on:

1. You're prepending/removing item nearly 60 times per second or so.
2. You can't show full-width overlay over active element! If you're doing so, when overlay is active dragleave will be fired when you're moving mouse around.

3. I got this from dropbox website - they have four segments to show dropzone activation - like these (it's borders top, bottom, left, right ones):

   <div style="opacity: 0.6; /* display: none; */" class="external-drop-indicator top"></div>
   <div style="opacity: 0.6; display: none;" class="external-drop-indicator right"></div>
   <div style="opacity: 0.6; display: none;" class="external-drop-indicator bottom"></div>
   <div style="opacity: 0.6; display: none;" class="external-drop-indicator left"></div>
   

Good luck!

P.S. - you can always add a class to body instead of creating new nodes, and alter the view of dropzone via css.

In my project I found the following properties did flash:

• visibility:hidden to visibility:visible
• display:none to display:block

But the following property did not flash:

• opacity:0 to opacity:1

Also in the HTML make sure the overlay element appears before the active zone element.