jQueryUI Sortable won't accept connected Draggable on a nested UL

Question

I've posted an example here: http://jsfiddle.net/ericclemmons/LEHLX/2/

Really, what it comes down to is the classic "assigning users to groups" issue. I have a list of users and a list of groups, but I'd like to be able to have nesting of the groups: user "Eric" would be in "Users", "Web", and "Administrators".

The problem is that I cannot drag a user to an empty <ul> in the list.

Answer 1

I had to reformat your HTML a little bit and change the group ID to classes, try the updated demo.

HTML

<h3>Groups</h3>
<ul>
  <ul class="groups">
    <span>Administrators</span>
    <li></li>
  </ul>

  <ul class="groups">
    <span>Web</span>
    <li></li>
  </ul>
</ul>
<hr />
<h3>Users</h3>
<ul id="users">
    <li>Eric</li>
    <li>Richard</li>
    <li>Evan</li>
</ul>

Script

$('.groups').sortable({
    revert:      'invalid',
    placeholder: 'ui-state-highlight'
});

$('#users li').draggable({
    connectToSortable: '.groups',
    helper:            'clone'
});

I hope that is what you were trying to achieve.

Edit: Oh I forgot to add, I had to do this because it appears that sortable/draggable/droppable doesn't work on lists deeper than one level.