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();
});
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)'
});
You could use sortable's "items" option:
$( ".sortable" ).sortable({
items : 'li'
});
example
or...
$( ".sortable" ).sortable({
items : ':not(.note)'
});
example
You can explicitly exclude items with:
$( ".sortable" ).sortable({
cancel: ".disable-sorting"
});