JQuery Sortable elemento insieme a un indice di programmazione

Question

Ho una JQuery sortable (1.7.1 può cambiare se necessario) elenco in questo 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> 

Il secondo elemento è bloccato in modo se l'articolo 5 è cercato di essere spostato nello slot 2 andrà invece nello slot 3 e se provasse a essere spostato nello slot 1, l'elemento esistente nello slot 1 scende a 3 e l'articolo 5 passa a 1.

La logica di implementazione è semplice ma è necessario sapere è se c'è un modo programmatico di spostare gli oggetti intorno che includerebbe le animazioni.

Lo ha trovato già Moving an item programmatically with jQuery sortable while still triggering events ma non è sicuro se l'evento "sortupdate" simulerebbe un trascinamento e se funzionasse anche?

Answer 1

Dopo una rapida occhiata al codice sorgente di jQuery, non sembra che tale funzionalità sia incorporata a questo punto (sarebbe una buona aggiunta ad esso penserei). In ogni caso, una soluzione rapida che ho usato per ora nel caso in cui qualcuno ha mai lo stesso problema:

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

      $el.fadeIn(1000); 
     }); 

Indica un po 'chiaramente un oggetto in movimento da un posto ad un altro.

Ecco il codice completo del problema sopra riportato se qualcuno si avvicina allo stesso identico problema.

1- registrare questi 2 eventi nella init ordinabili in questo modo:

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

Questo ha funzionato perfettamente.

seguire i passi e includono questo:

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

     $el.fadeIn(1000); 
    }); 

Ti piace questa(impostando l'id del tag Li ovviamente):

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