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

javascript, jquery, jquery-ui

Solution

Presuming your sortable selector is `.line` :

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

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

Problem

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"?

Original source