jQuery UI : droppable background?

Question

일부 항목을 넣은 다음 휴지통에 버리면 휴지통을 열고 끌어낼 수있는 휴지통을 만들려고합니다.

내 웹 앱에 항목을 버리고 쓰레기통을 클릭하면 쓰레기통이있는 상자가 열리 며 검은 투명 배경에 사라져 다른 모든 것들을 감추고 있습니다. 휴지통 상자에 초점을.

코드 본질적

<div id="background"></div> 
<div id="trashcanContainer"> 
    <ul id="items"> 
    <li>item1</li> 
    <li>item2</li> 
    </ul> 
</div> 

백그라운드 CSS가 고정 된 위치에서 100 %의 폭과 높이로 설정하고이 낙하 할로 설정되어있다. 문제는 휴지통에서 무언가를 드래그하여 배경 위에 떨어 뜨리면 쓰레기통 위에 놓아도 제거된다는 것입니다. 기본적으로 jQuery는 배경보다 높은 z- 인덱스를 정의하더라도 trashcanContainer div가 백그라운드 div의 맨 위에 있다는 것을 이해하지 못합니다 (따라서 droppable의 일부가 아닙니다).

내가이 작업을 수행 할 수있는 방법이 있습니까?

Answer 1

#trashcanContainer은 position: absolute 또는 position: fixed으로 절대 위치해야합니다. 그렇지 않으면 z-index은 아무런 효과가 없습니다.