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

Posted by unknowndomain on Stack Overflow See other posts from Stack Overflow or by unknowndomain
Published on 2010-04-07T22:53:58Z Indexed on 2010/04/07 23:03 UTC
Read the original article Hit count: 407

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about sortable