jQuery Sortable elemento de conjunto a un índice programación

Question

Tengo una JQuery ordenable (1.7.1 puede cambiar si es necesario) la lista de este modo:

<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> 

El segundo elemento está bloqueado por lo que si el punto 5 se trató de ser movido en la ranura 2 el tope en la ranura 3 lugar y si tratamos de ser movido en la ranura 1 elemento existente en ese momento en la ranura 1 cae a 3 y de objeto 5 va a 1.

La lógica de aplicación es fácil, pero lo que necesita saber es si hay alguna forma programática de mover elementos que incluiría las animaciones.

¿Encontró este ya Moving an item programmatically with jQuery sortable while still triggering events pero no estoy seguro de si el evento 'sortupdate' simularía un arrastrar y soltar o si incluso funcionaría?

Answer 1

Después de un rápido vistazo al código fuente ordenable de jQuery, no parece que dicha funcionalidad esté incorporada en este punto (sería una buena adición a la que yo pensaría). De todos modos, una solución rápida utilicé por ahora en caso de que alguna vez alguien tiene el mismo problema:

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

      $el.fadeIn(1000); 
     }); 

Indica algo claramente un elemento en movimiento de un lugar a otro.

Aquí está el código completo del problema anterior si alguien llega al mismo problema.

1- Registro estos 2 eventos en el init Sortable, así:

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

Answer 2

Esto funcionó a la perfección.

seguir los pasos y incluyen este:

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

     $el.fadeIn(1000); 
    }); 

gusta esta(Configuración del ID de la etiqueta li por supuesto):

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