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

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.

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

确实发现这个已经以jQuery可排序方式移动项目,同时仍然触发事件但不确定'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);
    });
});