JQuery Sortable set item to an index programmatically

Question

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

  
1
  


        

Answer 1

This worked perfectly.

Follow the steps and include this:

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

        $el.fadeIn(1000);
    });

Like this (setting the id of the li tag of course):

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

After a quick look on jQuery's Sortable source code it doesn't seem that such functionality is built in at this point (would be a good addition to it I'd think). Anyhow, a quick workaround I used for now in case anyone ever has the same issue:

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

            $el.fadeIn(1000);
        });

It somewhat clearly indicates an item moving from one spot to another.

Here's the complete code to the above problem if anyone comes around to the exact same issue.

1- Register these 2 events in the Sortable init like so:

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