Принуждение элемента к месту в списке сортировки пользовательского интерфейса jQuery

Я создал список сортировки jQuery, но мне нужно иметь возможность хранить некоторые элементы в сортируемом "фиксированном" месте и сортировать другие элементы. Я думал, что для достижения этого будут построены методы, увы, это не так.

Я могу настроить список и не включать элементы, о которых идет речь:

<ul id="fruit">
    <li class="fixed">apples</li>
    <li>oranges</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="fixed">pears</li>
    <li>mango</li>
</ul>

<script type="text/javascript">
    $('#fruit').sortable({items: "li:not('.fixed')"})
</script>

Это останавливает меня от перетаскивания этих элементов, но они все равно перемещаются, если элементы вокруг них сортируются. Возможно, есть способ сделать это, используя многие обратные вызовы, которые этот метод имеет, но я не смог это обработать.

Может быть, этот метод будет хорошим дополнением к параметрам сортировки пользовательского интерфейса?

Ответ 1

Мне удалось это сделать, немного изменив код jitters и прикрепив его к событию "change", а не к "stop". Я сделал это, посмотрев, как изменяется индекс при перетаскивании элемента и настройке некоторых условных выражений. Он также работает с несколькими фиксированными элементами. Переменная "lockto" определяет положение неподвижного элемента, и фиксированный элемент должен быть в этом положении первоначально. Возможно, вы могли бы переписать это и обернуть его в функцию, поэтому вам не нужно вручную устанавливать переменную "lockto" для всех фиксированных элементов.

$("#sortable").sortable({
    "cancel":"li.static",
    "change":function(event,ui) {
        var lockto = 6;
        var thisindex = $(ui.helper).index(fixed);         
        var fixed = $("#static-"+lockto);           
        var index = $("#sortable li").index(fixed);
        var targetindex = lockto+1;
        if(index !== targetindex) {         
            if(index > targetindex ) {
                fixed.prev().insertAfter(fixed); //move it up by one position
            } else if(index==(targetindex-1) && thisindex>targetindex) {
                //don't move it at all
            } else {
                fixed.next().insertBefore(fixed); //move it down by one position
            }
        } else if(index==targetindex && thisindex>targetindex) {
            fixed.prev().insertAfter(fixed); //move it up by one position
        }       
    }
});

Ответ 2

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

Отметьте http://jsbin.com/etubi/2 для демонстрации (http://jsbin.com/etubi/2/edit для кода)

$("#sortable").sortable({
    cancel: "li.fixed", //exclude fixed ones
    stop:function(event, ui) {
        //nothing to do for #f0 as you can't sort anything above it
        var f5 = $("#f5");
        var indf5 = $("#sortable li").index(f5);
        //if f5 not in right position -> swap position
        if(indf5 !== 5) {
            if(indf5 > 5) {
                f5.prev().insertAfter(f5); //move it up by one position
            } else {
                f5.next().insertBefore(f5); //move it down by one position
            }
        }
    }
});

Ответ 3

Жаль, что я не видел этот вопрос до того, как я разместил свой и сделал все, что Сортируемое исследование. Это могло быть хорошей отправной точкой. Во всяком случае, здесь JQuery Sortable задает элемент для индекса программным путем, общее решение этой проблемы.

Ответ 4

Вы можете использовать отсортированную опцию "cancel"

Пример:

$("#sortable").sortable({
    cancel: "li.group_elem"
});

Таким образом, элементы li, имеющие класс group_elem, не будут сортироваться.