JQuery UI: nested sortable errors

Question

Thanks for reading.

Two questions:

I am creating a task list type that will use nested sortable lists.

Here are some very simple demo codes:

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

Problem 1:

If you try to drag an item from a nested sublist, it works wonderfully in this list. The same thing if you try to reorder items in the main list.

However, if you want to drag an item from a sublist to the main list, or vice versa, it can be executed, but the placeholder does not appear immediately, it will try to save it in the same list. You must drag it all over the place before it enters the list that you have finished.

In the end, it looks like you understand that you want to get into the subsample or get out of it, but it is very arrogant.

, , , , , .

, , .

- ? ? , , , , ?

2:

, , , . , ( , ), , - ?

, .

:

Firefox. , IE . , .

!

Answer 1

: http://dev.jqueryui.com/ticket/4333

Answer 2

, JQuery . , , IE, FF.

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

Answer 3

, . , .

, Eli - Chrome 8.x.

Eli - 2, "myList" . "mySubList", .sortable( "refresh" ) . , , ( ). , . sortable ('refresh') ( ), 'click', .

, , .

Code (not verified, but you will get a view, even if it doesn’t work):

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