Javascript 使用相对定位的元素拖放角度文件上载_Javascript_Html_Css_Angularjs_Angular File Upload

Javascript 使用相对定位的元素拖放角度文件上载

javascript html css angularjs

Javascript 使用相对定位的元素拖放角度文件上载,javascript,html,css,angularjs,angular-file-upload,Javascript,Html,Css,Angularjs,Angular File Upload,我有一个问题与角度文件上传，被用于相对定位的元素。我的下降目标是100%的宽度和高度，绝对定位。如果将文件拖动到任何非相对位置的元素上，则覆盖效果良好，一切正常。但是，如果在相对定位的图元上拖动，它不会注册拖动事件。这是因为相对定位的元素出现在dropArea的顶部我已经尝试过对拖放目标应用z索引，拖放效果很好，但是我再也不能在UI上单击任何东西了我的逻辑是： HTML 有没有办法对dropArea应用z索引，但仍然允许单击通过？我通过将整个页面内容包装到dropArea解决了这个问题 &l

我有一个问题与角度文件上传，被用于相对定位的元素。我的下降目标是100%的宽度和高度，绝对定位。如果将文件拖动到任何非相对位置的元素上，则覆盖效果良好，一切正常。但是，如果在相对定位的图元上拖动，它不会注册拖动事件。这是因为相对定位的元素出现在dropArea的顶部

我已经尝试过对拖放目标应用z索引，拖放效果很好，但是我再也不能在UI上单击任何东西了

我的逻辑是：

HTML

有没有办法对dropArea应用z索引，但仍然允许单击通过？

我通过将整个页面内容包装到dropArea解决了这个问题

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


...
把文件放在这里！
...

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

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