Question

I’m trying to create a sortable list using the Jquery sortable plugin.

I want a list like this…

• Section 1
  • Sub Section 1
    • Item 1
  • Sub Section 2
    • Item 2
    • Item 3
    • Item 4
• Section 2
  • Sub Section 3
    • Item 5
    • Item 6
  • Sub Section 4
    • Item 7
    • Item 8

Items at their level must stay at their level, I.E. this is wrong…

• Section 1
  • Section 2

or…

• Item 1
• Section 1
  • Item 2

I have tried to break it down into sortable areas but failed. All help greatly appreciated.

PS// When a section or sub-section is moved its child items must move with it

Answer 1

The way to do this is make sure that every nested list has the same class and you bind the sortable once to this class, also making lists unselectable. For example:

HTML:

<ul class='list'>
  <li>item1</li>
  <li>item2</li>
  <li>item3
    <ul class='list'>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </li>
</ul>

JS:

$(function() {
  $("ul.list").sortable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'pointer'
  });
  $("ul.list").selectable();
  $("ul.list").disableSelection();
});

See here: http://jsbin.com/eyoxu/22 (I modified this but otherwise stole code from it for the answer above)