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

score 52 · Accepted Answer · edited May 23 '17 at 12:34

52

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

edited May 23 '17 at 12:34

Community

1
1

answered Dec 14 '12 at 20:32

Trufa

39,971
43
126
190

5

Careful: this solution will indeed prevent the item to be draggable, but it will still be possible to move sibling draggable elements around it. – Zephyr Mar 07 '14 at 12:56
2

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](https://api.jqueryui.com/sortable/#option-items) – Nils Mar 14 '18 at 13:42

score 24 · Answer 2 · answered Jul 17 '13 at 21:15

24

You could use sortable's "items" option:

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

example

or...

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

example

answered Jul 17 '13 at 21:15

owise1

665
5
13

This also works with `` tags containing a dataset: `$("#table").sortable({items: "[data-real-line]"});`. – Amin NAIRI Apr 10 '17 at 08:15

score 6 · Answer 3 · answered Aug 17 '16 at 14:55

6

You can explicitly exclude items with:

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

answered Aug 17 '16 at 14:55

Mladen Janjetovic

13,844
8
72
82

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

3 Answers3

Linked