HTML5拖放事件基于叠加闪烁疯狂

Question

我正在尝试实现一个拖放上传器,当拖动文件拖入窗口时,该拖放标记带有覆盖区域(dropzone内部100%宽度/高度绝对元素,静态时看起来很棒)的dropzone,并在删除时删除该标记文件离开窗口或丢弃在dropzone之外.

问题在于,当文件被拖入窗口时,dragover和dragleave事件就像疯了一样激发,因此叠加层就像疯了一样闪烁.

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
}

Answer 1

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

嘿，

到底发生了什么：

1. 您每秒添加/删除项目近 60 次左右。
2. 您无法在活动元素上显示全角覆盖！如果您这样做，当覆盖处于活动状态时，当您移动鼠标时，将触发 Dragleave。

3. 我从 dropbox 网站得到这个 - 他们有四个部分来显示 dropzone 激活 - 像这些（它的边框顶部，底部，左侧，右侧）：

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

祝你好运！

PS - 您始终可以向 body 添加一个类，而不是创建新节点，并通过 css 更改 dropzone 的视图。