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

我有一个JQuery可排序（1.7.1可以根据需要更改）列表如下：

 
1
 
2
 
3
 
4
 
5
  

第二个项目被锁定，因此如果尝试在插槽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); }); }); 

Answer 2

在快速浏览一下jQuery的Sortable源代码之后，似乎并没有内置这样的function（对我来说这将是一个很好的补充）。 无论如何，我现在使用的快速解决方法，以防任何人遇到同样的问题：

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

它有点清楚地表明物品从一个地方移动到另一个地方。

如果有人遇到完全相同的问题，这里是上述问题的完整代码。

1-在Sortable init中注册这两个事件，如下所示：

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

2-

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