How to not allow parts of sortable jquery list to move?

Question

I made a sortable list:

<ul>
   <li class="line"><a href="#" class="food">milk</a></li>
   <li class="line"><a href="#" class="food">eggs</a></li>
   <li class="line"><a href="#" class="food">cheese</a></li>
</ul>

However, I want to make everything with class food not draggable. Since they are links, sometimes when people click them, they accidently reorder the list. Does anyone know how to make just the "food" class items not "draggable"?

Answer 1

Presuming your sortable selector is .line :

$('.line').sortable({ cancel: 'a.food' });

See: The cancel option in the jQuery UI documentation for details.