How to exclude an element from being dragged in sortable list?

Question

How can I exclude an element from sortable list? For instance, there is an element with class name 'note' that I don't want to be draggable?

    <ul class="sortable">              <li id="item_3">Item 3</li>             <li id="item_4">Item 4</li>             <li id="item_5">Item 5</li>              <p class="note">This is a note only</p>     </ul> 

jquery ui sortable, jquery not obviously does not work...

$(function() {     $( ".sortable:not(.note)" ).sortable(     }).disableSelection(); }); 

Answer 1

You need to use cancel.

See working example here.

Js:

$(function() {     $('.sortable').sortable();     $('.sortable').disableSelection();     $('.sortable').sortable({ cancel: '.note' }); });​ 

As @Zephyr points out, this let's you re-arrange the position by dragging the siblings, if you want to avoid that, use owise1 approach:

$('.sortable').sortable({     items : ':not(.note)' }); 

Answer 2

You could use sortable's "items" option:

$( ".sortable" ).sortable({     items : 'li' }); 

example

or...

$( ".sortable" ).sortable({     items : ':not(.note)' }); 

example