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();
});

Vessel

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

Fanchie

Careful: this solution will indeed prevent the item to be draggable, but it will still be possible to move sibling draggable elements around it. – Kenneth

In my case only using ":not(.any-class)" broke the sortable-behaviour since the selector was too general and applied to descendant DOM elements. I used "> :not(.any-class)" to fix this as the default value for items is "> *". Sortable Widget: items – Tiernan

Answer 2

You could use sortable's "items" option:

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

example

or...

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

example

Gamages

This also works with <tr> tags containing a dataset: $("#table").sortable({items: "[data-real-line]"});. – Kakemono

Answer 3

You can explicitly exclude items with:

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

Homing