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

前端之家收集整理的这篇文章主要介绍了JQuery Sortable以编程方式将项目设置为索引前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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’事件是否会模拟拖放或者它是否会起作用?

解决方法

这非常有效.

按照步骤包括

$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);
    });
});
原文链接:https://www.f2er.com/jquery/180938.html

猜你在找的jQuery相关文章