jQuery droppable issue

Question

사용자가 화면에 2 개의 상자를 만든 다음 다른 상자로 끌어서 놓을 수있는 jQuery 코드를 작성했습니다. 그때 또 다른 상자를 생성하고 상자 2 위를 드래그 앤 드롭 경우 HTML 관점에서이 ...이 같은

<div id="1"> 
    <div id="2"> 
    </div> 
</div> 

을 볼 것, 그것은 항상 상자 1 (즉 상자 2의 부모) 삭제합니다. 내가 원하는이 ...

<div id="1"> 
    <div id="2"> 
     <div id="3"> 
     </div> 
    </div> 
</div> 

입니다 ...하지만 내가 할 것은이 ...

<div id="1"> 
    <div id="2"> 
    </div> 
    <div id="3"> 
    </div> 
</div> 

당신은 [수로 사용] 가 이 여기 일어나고 볼 수 있습니다. .. http://acarna.com/editor.php < - 문제를 해결했습니다 ... 내 대답을 참조하십시오.

"H"버튼을 클릭하여 상자를 만듭니다. 상자의 오른쪽 상단 모서리에있는 회색 사각형을 잡아서 페이지 아래쪽으로 끕니다. 마우스를 상자의 가장자리 또는 구석 위로 이동하고 크기를 조정하십시오.

그런 다음 "H"를 다시 클릭하여 상자 2를 만듭니다. 상자 2를 상자 1에 끌어다 놓습니다. 올바르게 작동합니다. Firefox를 사용하는 경우 마우스 오버시 상자 1에 상자가 추가 된 것을 볼 수 있습니다.

내가 겪고있는 문제는 상자 3을 만들 때 상자 2 위로 옮기고 안에 놓으려고 할 때입니다. 상자 1 만 감지하고 그 안에 놓습니다.

상자 3을 드래그하여 상자를 추가 할 때 jQuery가 상자 2를 감지하도록 놓친 트릭이 있습니까?

Answer 1

jQuery UI (에헴) 드문 드문 문서로 어려움을 겪은 후 얼마 안있어 보았습니다.

droppable 옵션 'greedy'는 객체를 droppable 객체 트리에 떨어 뜨렸을 때 그 객체가 떨어지는 위치를 결정합니다.

false (기본값)로 설정하면 삭제 된 개체가 트리에서 가장 낮은 삭제 가능 개체에 도착합니다. true로 설정하면 드롭 된 오브젝트는 트리의 첫 번째 (즉, 가장 높은) 드롭 가능 오브젝트에 위치하게됩니다.

이것은 다음 마크 업을 예로 사용하여 증명할 수 있습니다.

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
     </div> 
    </div> 
</div> 

드래그 가능한 객체 (아래 지정된 ID = "all_new_container은") DIV 번호의 level_3_container에 삭제 ... 다음 div의 모든 낙하 할 객체 상상해보십시오. 당신이 방화범이있는 경우 여기에

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
      <div id="all_new_container"> 
      </div> 
     </div> 
    </div> 
</div> 

... 욕심 (즉, 기본값) false 인 경우 결과 마크 업 ...

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
     </div> 
    </div> 
    <div id="all_new_container"> 
    </div> 
</div> 

입니다 그리고 여기 욕심가 true로 설정되어있는 경우 발생 마크 업입니다 당신은 여기에있는 다른 물건으로 물체를 떨어 뜨리면서 위의 일들을 보게됩니다 ... http://acarna.com/editor.php

레벨 2 이상으로 떨어진 새로운 요소가 떨어지는 위치 지정 버그를 용서하십시오. 나는 그걸 수정하지 않을 것입니다. 위의 예에서 위의 데모에서는 그렇게 할 필요가 없습니다.