Question

我正在尝试实现一个拖放上传器，当文件被拖入窗口时，该拖放标记带有覆盖的dropzone（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
}

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

P.S。 - 您始终可以向正文添加类而不是创建新节点，并通过css更改dropzone的视图。

Answer 2

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

visibility:hidden至visibility:visible
display:none至display:block

但是以下属性没有闪烁：

opacity:0至opacity:1

还要在HTML中确保overlay元素出现在活动区域元素之前。

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

2 个答案: