title: How do I keep child elements together with parent jQuery sortable
body: <p>I have a list of items like this...</p>
  <pre><code>&lt;ol&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;img src=&quot;image.png&quot; /&gt;
          &lt;p&gt;Image Caption&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  <p>And I want to be able to sort the LI's but not the sub elements, they should just move with their parent.</p>
  <p>I am using the jQuery to do that...</p>
  <pre><code>$('ol li').sortable({ 'cursor': 'move' });
  </code></pre>
  <p>And its working but not moving the whole lot just the element you clicked i.e. the <code>&lt;p&gt;</code>, <code>&lt;img&gt;</code> or <code>&lt;span&gt;</code></p>
  <p>I can't figure out how to solve this so I looked about and found an option called <code>'items': '&gt; li'</code> 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 <code>&lt;li&gt;</code> still.</p>
  <p>Not sure what to do, example here: <a href="http://clareshilland.unknowndomain.co.uk/" rel="nofollow noreferrer">http://clareshilland.unknowndomain.co.uk/</a></p>
  <ol>
  <li><p>Press <code>ctrl+l</code> to login.</p>
  </li>
  <li><p>Enter the login details:</p>
  <p>Username: <code>clare</code><br />Password: <code>demo</code></p>
  </li>
  <li><p>Select 'edit' from under then 'image' portion of the menu.</p>
  </li>
  <li><p>The sortables should be those polaroids.</p>
  </li>
  </ol>
  <p>Thanks in advance, another one I've been banging my head on the table with.</p>