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:

    
Item 1
         


        

Answer 1

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>

Answer 2

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

Answer 3

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!

Answer 4

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

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