jQuery сортируемый отключить первый заполнитель

Есть ли способ отключить первый заполнитель в сортируемом неупорядоченном списке?

Я все еще хочу иметь возможность сортировать первый элемент (т. е. все элементы должны быть перетаскиваемыми), но я не хочу, чтобы какой-либо из элементов после первого мог быть отброшен выше первого.

У меня есть этот вид работы, но вместо того, чтобы отключить первый заполнитель, когда элемент удаляется, сортировка отменяется: 

$(".sortable").sortable({
    beforeStop: function(event, ui) {
        if(ui.placeholder.index() <= 1) {
            $(this).sortable('cancel');
        } else {
            //sort item
        }
    }
});

Любые указатели были бы очень признательны.

2 4
jquery jquery-ui-sortable

2 ответа:

Я нашел решение для этой проблемы. Ваш код был не так уж далек от моего решения.

Идея состоит в том, чтобы использовать опцию change, чтобы показать/скрыть заполнитель в зависимости от его позиции и отменить падение, если позиция является первой.

Код (jsFiddle здесь):

var cancelRequired = false;
$("#sortable1").sortable({
    placeholder: "sortable-placeholder",
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $(ui.placeholder).css('display', 'none');
        } else {
            $(ui.placeholder).css('display', '');
        }
    },
    beforeStop: function(event, ui) {
        cancelRequired = (ui.placeholder.index() <= 1);
    },
    stop: function() {
        if (cancelRequired) {
            $(this).sortable('cancel');
        }
    }
});

Взлом, используемый в beforeStop и stop, сделан из-за ошибки при попытке вызвать cancel непосредственно внутри beforeStop. Более подробная информация здесь , которые посылают меня на эту ссылку.

Этот код был тестировался с jQuery 1.8.2 и jQuery-ui 1.9.2

6

Вот более простой способ сделать это, и таким образом функция revert тоже работает. Чтобы это сработало, вы должны добавить класс к вашему первому элементу.

HTML: 

<ul id="sortable">
    <li class="no_sort sortable_first">First item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

Сценарий: 

$('#sortable').sortable({
    placeholder: 'sortable_placeholder',
    cancel: '.no_sort',
    opacity: 0.5,
    revert: 100,
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $('.sortable_first').after(ui.placeholder);
        }
    }
});

Скрипка

2