jquery-ui sortable, prevent item from being moved

Question

i have this list

<ul>
   <li class="line"><a href="#" class="drag">header(do not sort)</a></li>
   <li class="line"><a href="#" class="drag">line one</a></li>
   <li class="line"><a href="#" class="drag">line two</a></li>
</ul>

how can i prevent the first li from being moved?

Answer 1

You can specify which items within the sortable are actually sortable. This should do the trick, change the HTML as follows:

<ul>
   <li class="line" id="header"><a href="#" class="drag">header(do not sort)</a></li>
   <li class="line"><a href="#" class="drag">line one</a></li>
   <li class="line"><a href="#" class="drag">line two</a></li>
</ul>

Then when you set up the sortable:

$('ul').sortable({ items: 'li[id!=header]' });

Hope this helps!