jQuery를 정렬 가능한 방법 나는이 greate 플러그인을 발견

Question

드롭 대상으로 모든 아이를 설정합니다. 나는 비어있는 <ol></ol>를 추가하려고 노력했다. 그러나 그것은 실행 중에 dosnt한다. 정렬 가능한 트리를 만들기 전에이 작업을 수행해야합니다. 그러나 저는 모든 것을 동적으로합니다.

그리고 설명서에 따라 :

는

이름 :
사실 설명 :
기본 드롭 true의 경우, 항목

그래서 나는 그것이 작동해야 이해이 컨테이너에 떨어 뜨린 할 수있다 상자에서 나온 그 길?

도와주세요.

Answer 1

알아낼 수 있습니다.

작업 솔루션 :

$("ol.sortable").sortable({ 
    // animation on drop 
    onDrop: function (item, targetContainer, _super) { 
    var clonedItem = $('<li/>').css({height: 0}) 
    item.before(clonedItem) 
    clonedItem.animate({'height': item.height()}) 

    item.animate(clonedItem.position(), function () { 
     clonedItem.detach() 
     _super(item) 
    }) 
    } 
}) 

나는이 조각을 제거 생각 : 구성에서

group: 'simple_with_animation', 
    pullPlaceholder: false, 

도움이.

Answer 2

중첩 된 목록과 비슷한 모양은 li 요소에 플러그인을 초기화 할 때 중첩 된 컨테이너 (ol 또는 ul)가있는 경우에만 작동합니다.

당신은 당신의 나무를 동적으로 구성한다고 언급했습니다.

$li.removeData('subContainers'); 

가 만 li가 ol 또는 ul, 즉이 있는지 확인 : 그래서, 때마다 당신이 당신의 나무에 새 li을 추가, 새 노드 중첩 될 수 있도록 다음 줄을 실행해야합니다

을 이제

<ol class="sortable"> 
    ... 
    <li> 
     Your New Node 
     <ol></ol> 
    </li> 
    ... 
</ol> 

---

, 왜 정확하게 라인 $li.removeData('subContainers'); 작품? 당신이 플러그인 목록 항목 내부 드롭을 허용할지 여부를 결정을 할 때, 그것은 차례로, 다른 방법 getContainerGroup (see line 572)를 호출하는 방법 hasChildGroup (see line 506)를 호출하는 것을 볼 수 있습니다 the plugin code 내부 찾고
, 어디 자식들에 대한 정보를 계산하고 저장하며, 노드가 떨어 뜨릴 가능성이있는 드롭 대상을 계산하고 저장합니다. 계산은 한 번 발생하며 이후의 모든 삭제 시도는이 데이터를 다시 사용합니다.

다음은이 정보를 공격하여 다음 번에 데이터를 다시 계산할 수 있도록 노드 data에서이 정보를 지우는 것입니다.

'subContainers' is the key that the plugin uses 정보를 얻고 가능한 놓기 목표를 찾으십시오. 따라서 정확히이 키가있는 항목은 노드 data에서 제거되어야합니다.