jQuery UI : 중첩 정렬 오류

StackOverflow https://stackoverflow.com/questions/1429999

문제

읽어 주셔서 감사합니다.

두 가지 문제 :

중첩 된 정렬 목록을 사용하는 작업 목록 유형의 시스템을 만들고 있습니다.

다음은 매우 기본적인 데모 코드입니다.

<script>
    $(function(){

        $('.sortable_test > li').attr('style', 'border:1px solid red; padding:3px; margin:2px;');

        $('.sortable_test').sortable({
            distance: 5,
            connectWith: ['.sortable_test'],
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true
        });
    })
</script>
<ul class='sortable_test'>

    <li>
        Item
        <ul class='sortable_test'>

            <li>
                Item

            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
        </ul>
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
</ul>

Issue 1:

해당 목록 내에서 중첩 된 하위 목록에서 항목을 드래그하려고하면 훌륭하게 작동합니다. 기본 목록 내에서 항목을 재정렬하려고하는 경우 동일합니다.

그러나 항목을 하위 목록에서 기본 목록으로, 또는 그 반대로 드래그하려면 수행 할 수 있지만 자리 표시자는 즉시 나타나지 않으면 동일한 목록에 보관하려고합니다. 당신은 당신이 끝나는 목록에 등록하기 전에 모든 곳에서 그것을 끌어야합니다.

결국, 당신이 하위 목록에 들어가거나 나가고 싶다는 것을 깨닫는 것 같습니다.

기술적으로 둘 다를 끌고 있기 때문에 어떤 목록이 우선하는지 혼란 스러울 것입니다.

따라서 메인 목록에서 항목을 하위 목록으로 드래그하려고하면 전체 하위 목록이 단일 항목으로 간주되어 그와 같이 이동하려고합니다.

누구든지 이것을 만난 사람이 있습니까? 아이디어가 있습니까? 아마도 어떤 목록이 우선 순위를 지정하거나 관심있는 목록에 더 명확하게 만드는 방법이 있습니까?

Issue 2:

첫 번째 아이템, 하위 목록이있는 큰 아이템을 잡고 재정렬하려고하면 때때로 자체 하위 목록에 떨어지고 오류를 일으키고 사라집니다. 손잡이를 추가하고 손잡이에 서브리스를 숨겨 클릭 클릭 (더 작은 크기로 만들기)으로 드래그가 시작되기 전에이 문제를 해결할 수 있지만 다른 사람이 이것을 다루는 방법을 생각할 수 있습니까?

문제는 높이가 크게 항목을 드래그하는 것 같습니다.

브라우저 :

이것은 모두 Firefox에 있습니다. 즉, 중첩 된 정렬을 전혀 다룰 수없는 것 같습니다. Subrist에서 아이템을 잡을 방법이없는 것 같습니다.

감사!

도움이 되었습니까?

해결책

이 버그 확인 : http://dev.jqueryui.com/ticket/4333

다른 팁

나는 비슷한 문제가 있고 jQuery UI에 버그를 제출하고 여기에 게시했습니다. 몇 가지 추가 분류 가능한 옵션을 사용한 데모가 있으며 실제로는 잘 작동하는 것처럼 보이지만 FF에서 중첩 된 목록에서 드래그 할 수는 없습니다.

$(".myList").sortable({ connectWith: ".myList", appendTo: 'body', helper: 'clone', items: 'li' });

이 스레드를 부활 시켜서 죄송합니다. 이 스레드를 우연히 발견 한 다른 사용자를 위해 게시하고 싶었습니다.

Chrome 8.X를 사용하여 ELI와 똑같은 문제가 있습니다.

ELI -Issue 2를 해결하기 위해 드래그중인 요소의 모든 하위 목록에서 "MyList"클래스를 제거했습니다. 나는 그것을 "mysublist"로 변경 한 다음 드래그중인 목록 항목에서 .sortable ( 'Compertable')을 호출합니다. 마지막으로 드래그가 완료되면 다시 변경하고 다시 새로 고침을 호출합니다. 이는 부모 항목이 자체 하위 목록 중 하나에 배치되어 오류를 일으키는 것을 방지합니다. 정렬 가능한 시작 이벤트에서 Sortable ( 'Compertable')을 호출 할 수 없으므로 (어쨌든 나에게 효과가 없었습니다), 정렬 가능한 이벤트 전에이 작업을 수행하는 자신만의 '클릭'이벤트를 만들어야합니다. 발사를 시작하십시오.

손잡이가 있으므로 사용자가 핸들을 클릭하면이 작업을 모두 수행합니다.

코드 (테스트되지 않았지만 작동하지 않더라도 아이디어를 얻을 수 있습니다) :

$('.sortable_test').sortable({
   distance: 5,
   connectWith: ['.sortable_test'],
   placeholder: 'ui-state-highlight',
   forcePlaceholderSize: true
}).find('li').click(function() {
   $(last_selected_li).find('.mySubList').removeClass('mySubList').addClass('myList').end().sortable('refresh');
   $(this).find('.myList').removeClass('myList').addClass('mySubList').end().sortable('refresh');
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top