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

Solution 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)'
});

Solution 2:

You could use sortable's "items" option:

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

example

or...

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

example

Solution 3:

You can explicitly exclude items with:

$( ".sortable" ).sortable({
     cancel: ".disable-sorting"
});