콘텐츠가있는 오버레이 된 div의 Z- 색인을 자동으로 설정합니다.

Question

이전에 묻지 않은 매우 구체적인 문제가 있습니다. 적어도 발견하지 못했습니다. 어쨌든, 상황은 다음과 같습니다.

나는 draggable div가 있습니다. doubleclick으로 편집 할 수있는 목록을 포함하는 div는 정렬이 가능하고 계속해서 켜져 있습니다. 이러한 컨테이너 내에서 약간의 작업을 수행 할 수 있음을 알 수 있습니다.

내 문제 : 먼저 JQuerys의 일부로 draggable을 사용하여 Z- 인덱스를 모든 요소의 가장 높은 값으로 자동 설정할 수 있습니다. 그러나 드래그 한 경우에만 가능합니다. 이벤트 영역 내에서 간단한 클릭만으로 z- 인덱스가 auto로 설정되면 "클릭 된"요소가 위에 표시됩니다.

두 번째 큰 문제는 div에 포커스를 설정하는 모든 핸들러를 수정하지 않고 div에 핸들러를 가져 오는 것이 불가능하다는 것입니다.

어디서나 클릭 할 때 항상 호출되는 전체 div에 핸들과 같은 것을 추가하는 방법에 대한 제안 사항이 있습니까?

고마워,

Nurickan 내 마음에 오는

Answer 1

문제점을 이해하면 클릭 및 포커스 이벤트를 사용하여 Z- 색인을 업데이트 할 수 있습니다. div의 자식 요소가 포커스를 얻을 때마다 포커스가 발생합니다.

$("div").draggable(
    {start:updateContent} 
); 
$("div").click(updateContent); 
$("div").focus(updateContent); 

function updateContent() 
{ 
    $("div").css("z-index", 1); 
    $(this).css("z-index",2); 
} 

샘플 바이올린 : 드래그 이런 식으로 뭔가를하는 것처럼 http://jsfiddle.net/Cwp2e/14/

Answer 2

한 가지 - 당신은 드래그 코드를 공부 했습니까? 적어도 클릭 및 마우스 이벤트에 연결된 부품은 확인해 볼 가치가 있습니다.

어디에도 preventDefault() 함수가있는 경우 부모 이벤트의 각 하위 요소에 자신의 이벤트를 직접 바인딩하고 부모를 그런 식으로 제어하는 ​​것 외에는 다른 작업을 수행 할 수 없습니다.