두 div 사이의 드래그 앤 드롭에 z- 인덱스가 적용된 경우

Question

두 컨테이너 div가 있고 그 사이에 요소를 끌어 놓기를 원합니다. 두 번째 컨테이너에서 첫 번째 컨테이너로 요소를 끌어다 놓을 수는 있지만 반대 방향으로 배치 할 수는 없습니다. 문제는 첫 번째 컨테이너의 요소가 두 번째 컨테이너보다 낮은 z- 인덱스를 갖는 것입니다. 드래그하면 두 번째 컨테이너 아래로 미끄러집니다. 모든 요소를 ​​맨 위에 놓고 어떤 드롭 가능한 컨테이너에도 드래그 할 수 있도록하려면 어떻게해야합니까? 이것은 문제를 보여주는 바이올린입니다. 당신은 컨테이너 2 용기 (1)에서 요소를 드래그하면 당신은 당신이 컨테이너이 컨테이너이 때문에 발생 1 위를 드래그 할 수있는 용기 2에서 요소를 드래그하면

http://jsfiddle.net/vfAgd/12/

, 그것은 용기 2. 아래에 간다

Answer 1

이 문제를 해결하려면 컨테이너의 Z- 색인을 제거해야했습니다.

.comdiv { 
    padding: 0; 
    margin-top: 20px; 
    margin-left: 20px; 
    border: 1px solid DarkKhaki; 
    border-radius: 3px 3px 0px 0px; 
    box-shadow: inset 0px 0px 10px DarkKhaki; 
    /* z-index: 26; */ 
} 

http://jsfiddle.net/vfAgd/17/.

Answer 2

드래그하는 요소에 jQuery UI draggable이 추가되는 클래스 이름이 있습니다. 이 클래스는 드래그가 끝나면 제거됩니다. 이 클래스는 ui-draggable-dragging입니다. ui-draggable-dragging 클래스에 높은 z- 색인을 추가하면 문제가 해결됩니다. 문제가 해결되어야합니다. 코드에 버그가있는 것 같습니다. 디버그하고이 CSS를 추가하십시오. 그것은 그 때 작동 할 것이다.

.ui-draggable-dragging{z-index:9999;}