基于 HTML5 拖放事件的叠加层像疯了一样闪烁答案

【问题标题】：HTML5 drag and drop event based overlay flashing like crazy基于 HTML5 拖放事件的叠加层像疯了一样闪烁
【发布时间】：2012-12-22 21:11:26
【问题描述】：

我正在尝试实现一个拖放上传器，当一个文件被拖到窗口中时，它会用一个覆盖（dropzone 内的 100% 宽度/高度绝对元素，静态时看起来很棒）标记 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
}

【问题讨论】：

你不想用dragenter 代替dragover吗？
也许吧。我换成了 dragenter 并且出现了同样的问题，尽管“闪烁”较少。
基本问题是当元素可见时会触发dragLeave。我也有这个问题，尝试添加样式而不是添加和删除覆盖元素，但没有运气。
您可以用您的代码创建一个jsfiddle.net 吗？

标签： javascript jquery html dom

【解决方案1】：

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

嘿，

实际情况：

您每秒大约要添加/删除项目 60 次左右。
您不能在活动元素上显示全宽覆盖！如果你这样做，当你移动鼠标时，当覆盖处于活动状态时，dragleave 将被触发。

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

祝你好运！

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

【讨论】：

【解决方案2】：

在我的项目中，我发现以下属性确实闪烁：

visibility:hidden 到 visibility:visible
display:none 到 display:block

但以下属性没有闪烁：

opacity:0 到 opacity:1

同样在 HTML 中，确保覆盖元素出现在活动区域元素之前。

【讨论】：