상대적으로 배치 된 요소와 함께 사용되는 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;
}
dropArea에 Z- 색인을 적용하지만 여전히 클릭이 통과하도록 허용하는 방법이 있습니까?
드롭 영역에서 전체 페이지 콘텐츠를 래핑하여이 문제를 해결했습니다.
<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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다