Question

我有一个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>

第二个项目被锁定，因此如果试图在第2个插槽中移动第5个项目，它将在第3个插槽中移动，如果尝试在插槽1中移动，则插槽1中的现有项目将降至3，第5项将转到1。

实现逻辑很简单，但我需要知道的是，是否有任何编程方式可以移动包含动画的项目。

找到这个已经Moving an item programmatically with jQuery sortable while still triggering events，但不确定'sortupdate'事件是否会模拟拖放或者它是否会起作用？

Answer 1

这完美无缺。

按照步骤包含此：

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

        $el.fadeIn(1000);
    });

喜欢这个 （当然设置li标签的ID）：

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);
    });
});

Answer 2

在快速浏览一下jQuery的Sortable源代码之后，似乎并没有内置这样的功能（我认为这将是一个很好的补充）。无论如何，我现在使用的快速解决方法，以防任何人遇到同样的问题：

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

            $el.fadeIn(1000);
        });

它有点清楚地表明物品从一个地方移动到另一个地方。

如果有人遇到完全相同的问题，以下是上述问题的完整代码。

1-在Sortable init中注册这两个事件，如下所示：

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);
};

JQuery Sortable以编程方式将项目设置为索引

2 个答案: