Jquery ui sortable disable для одного элемента li

Можно ли отключить jquery ui sortable только для одного элемента списка? Вот пример кода:

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

Например, я отключу сортировку, когда я нажимаю элемент. Пожалуйста, помогите.

Вот код javascript:

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

Ответы

Ответ 1

Конечно, попробуйте что-то вроде этого:

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

Используя параметр items, вы можете указать элементы, которые можно сортировать и не сортировать.

Пример jsFiddle

Ответ 2

Вы можете явно исключать элементы (в том числе, не включая их):

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

Ответ 3

Я знаю, этот вопрос старый. но я даю вам правильный ответ. Как динамически сделать элемент отключенным и включенным кликом. Потому что у меня такая же проблема в 2016 году: D

в первую очередь. Все, что вам нужно сделать, - это установить элементы сортировки, которые будут отключены при запуске. Добавьте параметр, который удаляет отключенные элементы из списка (это необходимо для первого init):

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

(бутстрап, используемый в примере)

Тогда просто добавить прослушиватель событий, я использовал onClick, поэтому пример здесь:

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

Сортируемый элемент будет сортироваться только в том случае, если у него есть данные, которые называются sortableItem, поэтому он будет отключен динамически, надеюсь, что это поможет кому-то.

Ура!

Ответ 4

На этот вопрос есть два похожих ответа... но их поведение очень отличается.

С помощью cancel вы можете динамически сортировать/не сортировать элемент:

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

Используя items, вы можете сделать элемент сортируемым/не сортируемым, но только во время инициализации:

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

Посмотрите разницу в этой демонстрации:

$(".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 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 unsortable</button>
    </div>
</div>