7

我正在尝试实现一个拖放上传器，当将文件拖到窗口中时，它会使用叠加层标记放置区域（放置区域内的 100% 宽度/高度绝对元素，静态时看起来很棒），并在文件离开窗口或被拖放到放置区之外。

问题是当文件被拖入窗口时，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
}
4

2 回答 2

2 
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 的视图。

于 2015-05-14T19:53:25.150 回答
1

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

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

但是以下属性没有闪烁：

  • opacity:0至opacity:1

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

于 2019-09-28T17:32:25.570 回答