JQuery Сортируемый набор элементов для индекса программно - PullRequest
Новая
       0

JQuery Сортируемый набор элементов для индекса программно

7 голосов
/ 08 февраля 2011

У меня есть сортируемый JQuery (1.7.1 может измениться при необходимости), например, так: 

<ul id='pl'>
  <li class='item'>1</li>
  <li class='item locked'>2</li>
  <li class='item'>3</li>
  <li class='item'>4</li>
  <li class='item'>5</li>
</ul>

Второй предмет заблокирован, поэтому если попытаться переместить предмет 5 в слот 2, он перейдет в слот 3, а если его попытаться переместить в слот 1, то существующий предмет в слоте 1 упадет до 3, а предмет 5 перейдет в 1.

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

Обнаружил ли это уже Программно перемещать элемент с помощью сортируемой jQuery, все еще вызывая события , но не уверен, будет ли событие 'sortupdate' имитировать перетаскивание или будет ли оно вообще работать?

Ответы [ 2 ]

5 голосов
/ 04 декабря 2012

Это сработало отлично.

Следуйте инструкциям и включите это : 

    $el.fadeOut(1000, function(){
        $el.insertAfter($el.next());

        $el.fadeIn(1000);
    });

Как это (установка id тега li курса) : 

jQuery(".templateMoveUp").on("click", function(){   
    $el = jQuery("#" + $(this).attr("id") + "_logTemplate");
    $el.fadeOut(1000, function(){
        $el.insertBefore($el.prev());
        $el.fadeIn(1000);
    });
});
jQuery(".templateMoveDown").on("click", function(){ 
    $el = jQuery("#" + $(this).attr("id") + "_logTemplate");
    $el.fadeOut(1000, function(){
        $el.insertAfter($el.next());
        $el.fadeIn(1000);
    });
});
3 голосов
/ 10 февраля 2011

После быстрого просмотра исходного кода jQuery Sortable, кажется, что такая функциональность не встроена в данный момент (я думаю, было бы хорошим дополнением к нему).Во всяком случае, быстрый обходной путь, который я использовал сейчас, на случай, если у кого-то возникнет та же проблема: 

        $el.fadeOut(1000, function(){
            $el.insertAfter($el.next());

            $el.fadeIn(1000);
        });

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

Вот полный кодк вышеупомянутой проблеме, если кто-то придет к точно такой же проблеме.

1- Зарегистрируйте эти 2 события в Сортируемом инициале следующим образом: 

start: function(event,ui){$(ui.item).data('initialPos', $(ui.item).offset().top)},
handle: ".drag",
stop: lockedRearrange,

2- 

var lockedRearrange = function(event, ui){

    //block ordering while the current item is rearranged
    $('.drag', event.target).removeClass('drag').addClass('blockdrag');

    var $el = $(ui.item);
    var directionUp = (ui.absolutePosition.top < $el.data('initialPos')) ? true : false ;

    _rearrange($el, directionUp, $el.data('initialPos'));
};

var _rearrange = function($el, directionUp, initialPos){
    if ($el.offset().top == initialPos) {
        $('.blockdrag', $el.parent()).removeClass('blockdrag').addClass('drag');
        return;
    }

    var $knockEl = (directionUp) ? $el.next() : $el.prev();

    if ($knockEl.hasClass('locked')) {
        $el.fadeOut(1000, function(){
            (directionUp) ? $el.insertAfter($knockEl) : $el.insertBefore($knockEl);

            $el.fadeIn(1000, function(){
                _rearrange($el, directionUp, initialPos);
            });
        });
    }else
        _rearrange($knockEl, directionUp, initialPos);
};
...