Пользовательский интерфейс jQuery: вложенные сортируемые ошибки - PullRequest
Новая
       8

Пользовательский интерфейс jQuery: вложенные сортируемые ошибки

3 голосов
/ 16 сентября 2009

Спасибо за чтение.

Два выпуска:

Я создаю систему типа списка задач, которая будет использовать вложенные сортируемые списки.

Вот небольшой демонстрационный код: 

<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>

Выпуск 1:

Если вы попытаетесь перетащить элемент из вложенного подсписка, в этом списке он будет работать замечательно. То же самое, если вы попытаетесь изменить порядок элементов в основном списке.

Однако, если вы хотите перетащить элемент из подсписка в основной список, или наоборот, это МОЖЕТ быть сделано, но заполнитель не появится сразу, он попытается сохранить его в том же списке. Вы должны перетащить его повсюду, прежде чем он зарегистрируется в списке, над которым вы закончили.

В конце концов, кажется, вы понимаете, что вы хотите войти или выйти из подсписка, но это очень тяжело.

Я думаю, что, возможно, он запутался в том, какой список имеет приоритет, поскольку технически вы перетаскиваете оба.

Таким образом, если вы попытаетесь перетащить элемент из основного списка в подсписок, он будет рассматривать весь подсписок как один элемент и попытаться переместить его как таковой.

Кто-нибудь сталкивался с этим? Есть идеи? Возможно, есть способ указать, какой список имеет приоритет, или сделать плагин более понятным, какой список вас интересует?

Выпуск 2:

Если вы возьмете первый элемент, большой с подсписком, и попытаетесь изменить его порядок, иногда он попытается попасть в свой собственный подсписок, вызвать ошибку и исчезнуть. Я могу обойти это, добавив дескриптор и скрыв подсписок по щелчку дескриптора (уменьшив его размер, что решает проблему), до начала перетаскивания, но может кто-нибудь еще придумать, как с этим справиться? *

Похоже, проблема в перетаскивании элемента с большой высотой.

браузеры:

Это все в Firefox. IE, кажется, не в состоянии справиться с вложенными сортируемыми объектами вообще. Кажется, нет никакого способа получить элемент из подсписка.

Спасибо!

Ответы [ 3 ]

1 голос
/ 14 ноября 2009

У меня похожие проблемы, и я также отправил сообщение об ошибке в пользовательский интерфейс JQuery и разместил здесь сообщение. У меня есть демонстрационная версия, где я использовал несколько дополнительных сортируемых опций, и в IE это работает нормально, но вы не можете перетаскивать вложенные списки в FF. 

$(".myList").sortable({ connectWith: ".myList", appendTo: 'body', helper: 'clone', items: 'li' });
1 голос
/ 17 сентября 2009

Проверьте эту ошибку: http://dev.jqueryui.com/ticket/4333

0 голосов
/ 14 января 2011

Извините, что возродил эту тему. Просто хотел опубликовать для других пользователей, которые наткнуться на эту тему.

У меня точно такие же проблемы, как у Eli - при использовании Chrome 8.x.

Eli - для решения проблемы 2 я удалил класс "myList" из всех подсписков перетаскиваемого элемента. Я изменяю его на «mySubList» и затем вызываю .sortable («refresh») для перетаскиваемого элемента списка. Наконец, я изменяю его обратно после завершения перетаскивания (и снова вызываю refresh). Это предотвращает размещение родительского элемента в одном из его собственных подсписков и вызывает ошибку. Вы не можете вызвать sortable ('refresh') в событии start для sorttable (у меня это все равно не сработало), поэтому вам нужно создать собственное событие 'click', которое выполняет всю эту работу до событий сортировки начать стрельбу.

У меня есть ручка, поэтому я просто делаю всю эту работу, когда пользователь нажимает на ручку.

Код (не тестировался, но вы получите идею, даже если она не работает): 

$('.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');
});
...