jQuery UI: Nested sortable errors.

Question

Hi All,

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!

Answer 1

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

Answer 2

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

Demo: http://dl.dropbox.com/u/396448/JQueryUINestedListSorting.html