jQuery Sortable设置项以编程方式索引 [英] JQuery Sortable set item to an index programmatically

问题描述

我有一个可排序的JQuery(1.7.1可以根据需要更改)列表，如下所示:

I have a JQuery sortable (1.7.1 can change if necessary) list like so:

<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中；如果尝试将项目5移至插槽1中，则插槽1中的现有项目将降为3，项目5移至1.

The second item is locked so if item 5 is tried to be moved in slot 2 it will go in slot 3 instead and if tried to be moved in slot 1 then existing item in slot 1 drops to 3 and item 5 goes to 1.

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

The implementation logic is easy but what I need to know is if there is any programmatic way of moving items around that would include the animations.

是否已经找到了该对象?使用jQuery可排序地以编程方式移动项目，同时仍触发事件但不确定'sortupdate'事件是否会模拟拖放或是否可行?

Did find this one already Moving an item programmatically with jQuery sortable while still triggering events but not sure if the 'sortupdate' event would simulate a drag and drop or if it would even work?

推荐答案

这非常有效.

按照步骤操作，并添加此内容:

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

这篇关于jQuery Sortable设置项以编程方式索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！