jQuery 여러 수준 항목에 대해 정렬 가능

Question

여러 수준의 정렬 가능한 목록이 필요합니다. 그것은이 내가

<div class='sortable'> 
    <div class='item1'>aa</div> 
    <div class='item1'> 
     <div class='item2'>bb</div> 
     <div class='item2'>cc</div> 
     <div class='item2'>dd</div> 
    </div> 
    <div class='item1'>ee</div> 
</div> 

필요한 구조 및 스크립트 일

하지만 난 여러 수준을 시도 할 때 :(

작동하지 그것입니다 easly 설명으로 나는 this blog와 그것을 시도

$(".sortable").sortable(); 
$(".item1").sortable(); 

sortable()에 sortable class을 지정하고 item1 class의 하위를 할당하면 모두 item1 및 item2 클래스는 draggable="true" 속성을 할당 할 것이므로 item1 아래에서 자식을 드래그 할 수 없습니다. item2 요소는

감사

에게 동시에 정렬 수준 모두를 만들기위한 좋은 솔루션이 있습니까 부모 item1

내부에 드래그해야

Answer 1

당신은 그런 걸 시도 할 수 있습니다 :

<div class='sortable'> 
    <div class='item1'>aa</div> 
    <div class='item3'> 
     <div class='item2'>bb</div> 
     <div class='item2'>cc</div> 
     <div class='item2'>dd</div> 
    </div> 
    <div class='item1'>ee</div> 
</div> 

$(".item3").sortable({ 
    connectWith: ".sortable" 
}); 
$(".sortable").sortable({ 
    connectWith: ".item3" 
}).disableSelection(); 

을

Answer 2

이것이 필요한 동작입니까?

http://jsfiddle.net/JKqrX/1/

아이디어는 만드는 것입니다 자식 요소를 가지고 있으며 모든 핸들이있는 별도의 정렬 '항목 1' '항목 1'둘 다 수준을 comfartably 정렬 할 수 있도록. 당신은

//HTML 
<div class='sortable'> 
    <div class='item1'><span class="handle">handle </span>aa</div> 
    <div class='item1 has-child'> 
     <span class="handle">handle </span> 
     <div class='item2'>bb</div> 
     <div class='item2'>cc</div> 
     <div class='item2'>dd</div> 
    </div> 
    <div class='item1'><span class="handle">handle </span>ee</div> 
</div> 

//JS 
$(".has-child").sortable({ 
    items: ".item2" 
}); 
$(".sortable").sortable({ 
    handle: ".handle" 
});