jQuery UI sortable возвращает ul, но чего я действительно хочу, так это двух li

#jquery-ui #jquery-ui-sortable

Вопрос:

Я использую jQuery UI sortable, чтобы позволить пользователю перетасовывать список, но событие stop возвращает весь список.

Поэтому я обрабатываю:

 $(this).children('li').each(function(index) {

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

Возможно, мне следует просто продолжать добавлять атрибут data-Counter к каждому элементу списка и посмотреть, отличаются ли они от индекса.

Ответ №1:

Вы можете легко решить это, если сохраните начальную позицию элемента при начале перетаскивания.

 $('ul').sortable({
    start: function(event,ui){
        ui.item.data('index',ui.item.index());
    },
    stop: function(event,ui){
        var startIndex = parseInt(ui.item.data('index'),10);
        var stopIndex = ui.item.index();

        var msg = '';
        msg  = 'id of item: '   ui.item.attr('id')   'n';
        msg  = 'start index: '   startIndex   'n';
        msg  = 'stop index: '   stopIndex   'n';
        msg  = 'prev item id: '   ui.item.prev().attr('id')   'n';
        msg  = 'next item id: '   ui.item.next().attr('id')   'n';

        alert(msg);
    }
});

Попробуйте мою демонстрацию:http://jsfiddle.net/b8uJ8 /