JQuery的可排序設定項目的索引編程

我有一個JQuery的排序（1.7.1可以在必要時更改）列表如下所示：JQuery的可排序設定項目的索引編程

<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'事件是否會模擬拖放或者它甚至可以工作嗎？

來源

2011-02-07 haknick

在快速瀏覽jQuery的Sortable源代碼之後，似乎並沒有在這一點上構建這樣的功能（對我來說這是一個很好的補充）。總之，我萬一有人使用，現在一個快速的解決辦法有過同樣的問題：

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

      $el.fadeIn(1000); 
     });

它有點清楚地表明，從一個地方移動到另一個項目。

下面是上述問題的完整代碼，如果有人遇到完全相同的問題。

1-註冊這兩個事件在可排序的初始化，像這樣：

start: function(event,ui){$(ui.item).data('initialPos', $(ui.item).offset().top)}, 
handle: ".drag", 
stop: lockedRearrange,

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

來源

2011-02-10 04:47:18 haknick

這完美地工作。

按照以下步驟和包括此：

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

     $el.fadeIn(1000); 
    });

像這樣（設置課程裏標籤的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); 
    }); 
});

來源

2012-12-04 16:52:04 Pico

JQuery的可排序設定項目的索引編程

回答

相關問題