Принудительное сохранение элемента в списке сортировки пользовательского интерфейса jQuery - PullRequest
Новая
       23

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

14 голосов
/ 27 марта 2010

Я создал сортируемый список 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>

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

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

Ответы [ 3 ]

4 голосов
/ 27 сентября 2010

Мне удалось сделать это, немного изменив код дрожания и прикрепив его к событию «изменение», а не к «остановке». Я сделал это, посмотрев, как меняется индекс при перетаскивании элемента и настроив некоторые условия. Он также работает с несколькими фиксированными элементами. Переменная 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
        }       
    }
});
1 голос
/ 27 марта 2010

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

Проверьте 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
            }
        }
    }
});
0 голосов
/ 10 февраля 2011

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

...