CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Eli
Eli

Reputation: 99398

jQuery UI: Nested sortable errors

Thanks for reading.

Two issues:

I am creating a task-list type of system, which will use nested sortable lists.

Here's some very basic demo code:

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

If you try to drag an item from the nested sublist, within that list, it works wonderfully. Same if you try to reorder an item within the main list.

However, if you want to drag an item from the sublist to the main list, or vice versa, it CAN be done, but the placeholder won't appear right away, it will try to keep it in the same list. You have to drag it around all over the place, before it will register with the list you are over.

Eventually, it seems to realize you want to get into, or out of, a sublist, but it's very herky-jerky.

I am thinking perhaps it's confused as to which list has precedence, since you are dragging, technically, over both.

So, if you try to drag an item from the main list to a sublist, it will consider the entire sublist to be a single item and try to move over it as such.

Has anyone encountered this? Have any ideas? Perhaps there is a way to specify which list has precedence, or make it more obvious to the plugin which list you are interested in?

Issue 2:

If you grab the first item, the big one with the sublist, and try to reorder it, sometimes it will try to drop into it's own sublist, cause an error, and disappear. I can get around this by adding a handle, and hiding the sublist on handle click (making it a smaller size, which fixes the problem), before the drag starts, but can anyone else think of a way to deal with this?

Seems like the issue is with dragging an item with a large height.

Browsers:

This is all in Firefox. IE doesn't seem to be able to deal with the nested sortables at all. Seems there is NO way to grab an item from a sublist.

Thanks!

Upvotes: 3

Views: 4918

Answers (3)

Josh Pearce
Josh Pearce

Reputation: 3455

I am having similar problems and I too submitted a bug to JQuery UI and posted here. I have a demo where I used a couple of additional sortable options and it actually seems to work Okay in IE but you cannot drag out of nested lists in FF.

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

Upvotes: 1

BMiner
BMiner

Reputation: 17077

Sorry to revive this thread. Just wanted to post for other users who stumble across this thread.

I am having the exact same issues as Eli -- using Chrome 8.x.

Eli -- to solve issue 2, I removed "myList" class from all sublists of the element being dragged. I change it to "mySubList" and then call .sortable('refresh') on the list item being dragged. Finally, I change it back once the dragging is complete (and call refresh again). That prevents the parent item from being placed into one of its own sublists and causing the error. You can't call sortable('refresh') in the start event of the sortable (it didn't work for me anyway), so you have to create your own 'click' event that does all of this work before the sortable events start firing.

I have a handle, so I just do all of this work when the user clicks on the handle.

Code (not tested, but you'll get the idea 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');
});

Upvotes: 0

Jancha
Jancha

Reputation:

Check this bug: http://dev.jqueryui.com/ticket/4333

Upvotes: 1

Related Questions