title: HTML5 drag and drop event based overlay flashing like crazy
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>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('&lt;div class="overlay"&gt;HELLO&lt;/div&gt;');
    }
  }
  
  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
  }
  </code></pre>