使用相对定位的图元进行拖放角度文件上载
Drag and Drop Angular File Upload with Relatively Positioned Elements
我在上传Angular File时遇到问题,因为它与相对定位的元素一起使用。我的下降目标是100%的宽度和高度,绝对定位。如果将文件拖动到任何未相对定位的图元上,则覆盖效果良好,一切正常。但是,如果在相对定位的图元上拖动,则该图元不会注册拖动事件。这是因为相对定位的元素出现在dropArea的顶部。
我尝试过将z索引应用于放置目标,拖放效果很好,但之后我无法再单击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索引应用于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>
相关文章:
- html5拖放文件-在提交整个表单时上传
- 拖放文件上传无需AJAX,在前台同步
- 拖放文件时,dataTransfer.items属性在Firefox和IE中未定义,但在Chrome中未定义
- HTML5拖放文件字段
- 拖放文件上传多个,上传前预览 - php,javascript
- 如何检查 javascript 中拖放文件的文件名中的括号
- 如何使用php和javascript创建多个拖放文件上传,进度条
- HTML5拖放文件在Opera中不起作用
- Jquery File Upload插件无法在Internet Explorer 11中拖放文件
- 文件系统API-递归列出从目录拖放文件
- 拖放文件上传
- 将拖放文件发送到输入类型文件元素
- 使用“发送”手动发送拖放文件;jQuery表单插件”;
- 上传Html 5拖放文件的最简单方法
- Chrome拖放文件/文件夹不工作
- 是否有可能使用HTML拖放文件上传,但没有AJAX / XHR
- webkitGetAsEntry的Javascript拖放文件上传问题
- 在IE11和Firefox中拖放文件
- jtree按类拖放文件夹
- 检查HTML5拖放文件类型