jquery ui sortable disable for one li item

Question

It is possible do disable jquery ui sortable just for one list item? Here is the code example:

<ul class="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

For example I will disable sortable when I click item. Please Help.

Here is the javascript code:

$(document).ready(function(){
    $('.sortable li').click(function(){
        // Disable sortable for this item.............
    });
});

[What have you tried?](http://whathaveyoutried.com) Can you include your Javascript? — Dan Pichelman, Mar 12 '13 at 19:50
http://api.jqueryui.com/sortable/#option-cancel <- took 5 seconds to find. — Mahn, Mar 12 '13 at 19:52
possible duplicate of [jquery-ui sortable, prevent item from being moved](http://stackoverflow.com/questions/2006401/jquery-ui-sortable-prevent-item-from-being-moved) — , Aug 24 '14 at 23:07
Duplicate of http://stackoverflow.com/questions/2006401/jquery-ui-sortable-prevent-item-from-being-moved although @Mahn's comment is an interesting link and should make it somehow in the original QA. — , Aug 24 '14 at 23:09
Possible duplicate of [How to exclude an element from being dragged in sortable list?](http://stackoverflow.com/questions/13885665/how-to-exclude-an-element-from-being-dragged-in-sortable-list) — T J, Jan 05 '16 at 07:47

score 54 · Answer 1 · answered Mar 12 '13 at 19:57

54

Sure, try something like this:

 $(".sortable").sortable({
      items: "li:not(.unsortable)"
    });
 $(".sortable").disableSelection();

By using the items option you can specify the items that can and can't be sorted.

jsFiddle example

answered Mar 12 '13 at 19:57

j08691

204,283
31
260
272

Its possible to disable when I click the List Item – a_pajic Mar 12 '13 at 20:18
I don't understand what you mean. – j08691 Mar 12 '13 at 20:19
for example $('.sortable li').click(function(){/*disable this item*/}); – a_pajic Mar 12 '13 at 20:21
Do you mean is it possible to disable a sortable list item by clicking on it? If so that seems like a separate question. – j08691 Mar 12 '13 at 20:23
Worked like a charm for me! Thanks! :) – Konstantin Apr 21 '19 at 18:50

score 34 · Answer 2 · answered Apr 20 '15 at 12:32

34

You can explicitly exclude items (aside by not including them):

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

answered Apr 20 '15 at 12:32

Mladen Janjetovic

13,844
8
72
82

2

easiest to implement. – zookastos Nov 22 '16 at 20:55
2

This is easy but the disabled item could be moved up or down with in the list group. j08691's answer works in all scenarios. – Ram Pratap Sep 02 '17 at 23:27

score 8 · Answer 3 · answered Sep 22 '16 at 06:42

I know, this question is old. but I let you know right answer. How to dynamically make item disabled and enabled by click. Because I have the same issue at 2016 :D

first of all. All what you need to do is set items to the sortable what will be disabled at start. Add parameter what remove disabled items from the list(it needed on first init):

var sortable = $("#sortable-sections");
sortable.sortable({
     items: 'li:not(.ui-state-disabled)',
     helper: 'clone',
});
sortable.disableSelection();

(bootstrap used in example)

Then just add event listener, I used onClick, so example here:

sortable.find('li').click(function () {
    $(this).toggleClass('ui-state-disabled');
    $(this).hasClass('ui-state-disabled') ? $(this).removeData('sortableItem') : false;
});

Sortable-item will be sortable only if he have data what called sortableItem so it will make it dynamically disabled, hope it helps someone.

Cheers!

Hooman Bahreini · Answer 4 · 2018-12-19T08:32:44.003

This question has two similar answers... but their behavior is very different.

Using cancel, you can make item sortable / not-sortable dynamically:

$(".sortable_cancel").sortable({ 
    cancel: ".unsortable" 
});

Using items, you can make item sortable / not-sortable but only at initialization time:

$(".sortable_item").sortable({
    items: "li:not(.unsortable)"
});

See the difference in this demo:

$(".sortable_cancel").sortable({
    cancel: ".unsortable"
});
 $(".sortable_cancel").disableSelection();
 
  $(".sortable_item").sortable({
      items: "li:not(.unsortable)"
    });
 $(".sortable_item").disableSelection();

.sortable {
    list-style-type: none;
    width: 60%;
    padding: 5px;
}

.sortable li {
  padding-left: 1.5em;
}

li.unsortable {
    background: #999;
    opacity:.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div style="width:100%;">
    <div style="width:50%; float:left;">
        <label><b>Turn ON/OFF Item1 sortable</b></label>
        <ul class="sortable sortable_cancel">
            <li id="list1_toggle">Item1</li>
            <li>Item2</li>
            <li class="unsortable">Item3</li>
            <li>Item4</li>
            <li>Item5</li>
        </ul>
        <button onclick="$('#list1_toggle').toggleClass('unsortable')">Toggle Item1's unsortable</button>
    </div>

    <div style="width:50%; float:right;">
        <label><b>Item1 will remain sortable</b></label>
        <ul class="sortable sortable_item">
            <li id="list2_toggle">Item1</li>
            <li>Item2</li>
            <li class="unsortable">Item3</li>
            <li>Item4</li>
            <li>Item5</li>
        </ul>
        <button onclick="$('#list2_toggle').toggleClass('unsortable')">Toggle Item1's unsortable</button>
    </div>
</div>

jquery ui sortable disable for one li item

4 Answers4

Linked