How do I keep child elements together with parent jQuery sortable.

Question

I have a list of items like this...

<ol>
    <li>
        <span></span>
        <img src="image.png" />
        <p>Image Caption</p>
    </li>
</ol>

And I want to be able to sort the LI's but not the sub elements, they should just move with their parent.

I am using the jQuery to do that...

$('ol li').sortable({ 'cursor': 'move' });

And its working but not moving the whole lot just the element you clicked i.e. the <p>, <img> or <span>

I can't figure out how to solve this so I looked about and found an option called 'items': '> li' which was recommended but upon using this nothing drags any more but using firebug + jquery plugin I can see there is a sortable on the <li> still.

Not sure what to do, example here: http://clareshilland.unknowndomain.co.uk/

1. Press ctrl+l to login.

2. Enter the login details:

   Username: clare
   Password: demo

3. Select 'edit' from under then 'image' portion of the menu.

4. The sortables should be those polaroids.

Thanks in advance, another one I've been banging my head on the table with.

Answer 1

$('ol').sortable({ 'cursor': 'move' });

sortable() applies to the container and affects the children. Your 'ol li' selector makes the li the container, which results in the behavior your see.