상대적으로 위치가 지정된 요소로 끌기 및 놓기 각도 파일 업로드

상대적으로 배치 된 요소와 함께 사용되는 각도 파일 업로드에 문제가 있습니다. 내 드롭 타겟은 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- 인덱스를 적용하지만, 어떤 방법이 있나요 : 여기

내 논리입니까?

출처

2014-04-22 Eric

전체 페이지 내용을 놓기 영역에 배치하여이 문제를 해결했습니다.

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

출처

2014-04-22 16:45:43 Eric

상대적으로 위치가 지정된 요소로 끌기 및 놓기 각도 파일 업로드

답변

관련 문제