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

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

Две проблемы:

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

Вот очень простой демонстрационный код:

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

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

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

Браузеры:

Это все в файрфоксе. IE, похоже, вообще не может работать с вложенными сортируемыми элементами. Кажется, НЕТ способа получить элемент из подсписка.

Спасибо!


jquery jquery-ui jquery-ui-sortable
person Eli    schedule 15.09.2009    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

person Community    schedule 16.09.2009
comment
Спасибо! Я также создал отчет об ошибке для этого элемента, так как у него есть пара проблем. - person Eli; 17.09.2009

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

У меня те же проблемы, что и у Эли — с Chrome 8.x.

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

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

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

$('.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');
});
person BMiner    schedule 14.01.2011
comment
Милая! Я еще не работаю над этим, но мне все еще нравится представлять решение... - person Eli; 15.01.2011