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>

第二个项目被锁定，因此如果尝试将项目 5 移动到插槽 2 中，它将进入插槽 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);
    });
});