使用相对定位的元素拖放 Angular 文件上传答案

【问题标题】：Drag and Drop Angular File Upload with Relatively Positioned Elements使用相对定位的元素拖放 Angular 文件上传
【发布时间】：2014-04-22 13:28:10
【问题描述】：

我在使用相对定位的元素时遇到 Angular 文件上传问题。我的放置目标是 100% 的宽度和高度，绝对定位。如果您将文件拖动到任何非相对定位的元素上，则叠加层看起来很好并且一切正常。但是，如果您拖动相对定位的元素，它不会注册拖动事件。这是因为相对定位的元素出现在 dropArea 的顶部。

我尝试将 z-index 应用于放置目标，拖放效果很好，但是我无法再单击 UI 上的任何内容。

这是我的逻辑：

HTML

<html>
  <head>...</head>
  <body>
    <div id="dropArea">...</div>
    <div id="siteContent">
      <div class="row">
        <!-- dragging to this element fails, since it is relatively positioned -->
        <div class="col-md-12">...</div> 
        <div>...</div>
      </div>
    </div>
  </body>
</html>

CSS

#dropArea {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

有什么方法可以将 z-index 应用于 dropArea 但仍允许点击通过？

【问题讨论】：

标签： javascript html css angularjs angular-file-upload

【解决方案1】：

我通过将整个页面内容包装在放置区域中解决了这个问题。

<html>
<head>...</head>
<body>

<div id="dropArea" class="dropArea" ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="fileAdded">
  <div id="drop-content-container">
    <div id="drop-content">
      <img src="img/app/files-upload-dd.png">
      <h1>Drop Files Here!</h1>
    </div>
  </div>

  <div class="page-content">...</div>
</div>

</body>
</html>

【讨论】：