How do I include all children of a DOM element to be dragged using the Sortable plugin for MooTools?

Question

I am using mootools-more.1817.js...this is my HTML structure:

<ul id="categories">
  <div id="admin">Admin Controls</div>
    <li class="selected"><a href="#">Test</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Test 2</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Top Links</a>
        <ul>
            <li id="article"><a href="/1">Link 1</a></li>
            <li id="article"><a href="/3">Link 2</a></li>
            <li id="article"><a href="/2">Link 3</a></li>
            <li id="article"><a href="/4">Link 4</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Lame Links</a>
        <ul>
            <li id="article"><a href="/9">Link 9</a></li>
            <li id="article"><a href="/10">Link 10</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Awesome Links</a>
        <ul>
            <li id="article"><a href="/11">Link 11</a></li>
            <li id="article"><a href="/12">Link 12</a></li>
        </ul>
    </li>
</ul>

So I want to do two things:

1. Be able to drag each li item to another section and have it take all its children with it. E.g. if I am dragging the li that has the link Top Links, I want to drag not only the words Top Links, but also the div#admin, ul and li that are children of that parent li. Essentially all the children of each li.
2. I would also like to be able to drag items between lists of the children. So for instance, say I want to drag the link Link 2 from that ul to the section called Awesome Links and drop it between the links Link 11 and Link 12.

I have done this:

window.addEvent('domready', function(){
    new Sortables('#categories', {
        clone: true,
        revert: true,
        opacity: 0.7  
    });
});

What that does is drags JUST the li, and not the children of the li.

How do I achieve those?

Thanks.

Answer 1

First, you have invalid HTML by having div items in your categories list that are not in li tags themselves. The only immediate children to a ul can be li for a valid list.

Second, according to the documentation, "To enable sorting between lists, one or more lists or id's must be passed using an array or a selector" (http://mootools.net/docs/more/Drag/Sortables). That means, to move items between your sublists, each ul must be passed into a sortables group (different than the categories group). This should solve your issue #2.

I'm not yet sure why it would not drag the whole contents of the li, though it may be the invalid HTML is causing issues.