jQuery ui sortable : 토글 활성화 - 목록에서 정렬 가능하지 않음

Question

CMS 관리 페이지에서 AJAX를 통해 생성 된 여러 목록을 통해 사용자가 다양한 수준의 콘텐츠를 탐색 할 수 있습니다. 각 목록 요소는 사용자가 이전 목록을 클릭하면 생성됩니다.

$('#divid').on('click', 'ul', function() { 
    //code to modify lists 
    toggle_sortable(); 
}); 

지금 내가 jQuery를-UI sortable()을 활성화 및 비활성화하는 토글 버튼 "드래그"를 추가하는 것을 시도하고있다 : 나는 jQuery를 사용. 그러나 목록이 동적으로 생성되므로이 구현을 완벽하게 수행 할 수 없습니다.

function toggle_sortable() { 
    $('#drag').on('click', function(){ 
    //statement to check if sortable() is enabled and change state accordingly 
    }); 
} 

날이 상황에서 해결책을 찾기 도와주세요 : 현재 toggle_sortable()는 것 같습니다. 기본적으로 sortable()이 특정 목록에서 활성화되어 있는지 여부를 확인할 수 없습니다.

Answer 1

목록을 초기화 working DEMO입니다 버튼 클릭시 목록에서 동적으로 정렬 및 정렬 할 수 있습니다.

은 아래 표와 같은 기능을 사용할 수 있습니다 정렬 활성화/비활성화하려면 : 당신의 도움에 대한

$('#toggle').click(function() { 
     //check if sortable() is enabled and change and change state accordingly 
     // Getter 
     var disabled = $("#sortable").sortable("option", "disabled"); 
     if (disabled) { 
     $("#sortable").sortable("enable"); 
     $('#status').html('Sortable is now Enabled!!'); 
     } 
     else { 
     $("#sortable").sortable("disable"); 
     $('#status').html('Sortable is Disabled'); 
     } 
    }); 

Answer 2

나는이 질문을 잘 이해하고 있다고 확신하지는 않지만 클릭 핸들러를 같은 요소로 누적시켜야합니다. 어느 그것을 가지고 그 사람, 또는 각각의 추가 시간을 필터링, 처음과 같이, 제거 :

```

$('#drag').off("click", doit).on('click', doit); 

function() doit{ 
//statement to check if sortable() is enabled and change state accordingly 
// $(this) will be jquery reference to "#drag" element 
} 

``여기`

Answer 3

고마워! 죄송합니다. 문제를 정확하게 설명하지 못했습니다. 그러나 나는 당신의 입력을 사용하고 다음 코드를 사용하여 결국 :

$('#drag').on('click', function() { 
    event.preventDefault(); 
    $(this).toggleClass('sortable'); 
    if ($('#drag').hasClass('sortable')) { 
     $('#div ul').sortable(); 
    } else { 
     $('#div ul').sortable('destroy'); 
    } 
}); 

을 위의 코드가 활성화 sortable()을 해제하지만 새롭게 추가 된 요소 sortable()을 적용하지 않을 것입니다. 이들을 위해 나는 그 목록을 추가하는 함수 내에서 다음 행을 사용했다.

if ($('#drag').hasClass('sortable')) { 
    $('#ulid').sortable(); 
}