jQuery Sortable Move Botón ARRIBA/ABAJO

Question

Actualmente tengo una lista ordenable jQuery que funciona perfectamente. Puedo mover los elementos 'li' alrededor. Sin embargo, ¿cómo puedo hacer un botón para mover un elemento 'li' específico hacia arriba por uno y el anterior para moverlo hacia abajo (y por supuesto lo contrario para un botón de abajo)? He buscado en Google y he encontrado muy poco. ¡Incluso un enlace sería fantástico!

Gracias!

Answer 1

Si ha código HTML siguiente:

<button id="myButtonUp">myButtonTextForUp</button> 
<button id="myButtonDown">myButtonTextForDown</button> 
<ul> 
    <li>line_1</li> 
    <li>line_2</li> 
    <li>line_3</li> 
</ul> 

que se supone que tiene noté algo para marcar cada li s, por lo que después de asumir la marcada li tiene la clase markedLi; Siguiente código en teoría debería mover ese elemento hacia arriba o hacia abajo (no probado totalmente fuera de curso):

$('#myButtonUp').click(function(){ 
    var current = $('.markedLi'); 
    current.prev().before(current); 
}); 
$('#myButtonDown').click(function(){ 
    var current = $('.markedLi'); 
    current.next().after(current); 
}); 

Answer 2

Aunque la respuesta por Azatoth funciona bien, Bobby podría estar buscando una animación, como lo hice. así que escribí el siguiente código para hacer el movimiento animado:

function moveUp(item) { 
    var prev = item.prev(); 
    if (prev.length == 0) 
     return; 
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function() { 
     prev.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertBefore(prev); 
    }); 
} 
function moveDown(item) { 
    var next = item.next(); 
    if (next.length == 0) 
     return; 
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function() { 
     next.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertAfter(next); 
    }); 
} 

se puede echar un vistazo aquí http://jsfiddle.net/maziar/P2XDc/

Answer 3

Basado en @azatoth respuesta, si alguien gusta tener los botones para cada registro que puede hacer de esta manera (reemplace la etiqueta li con su etiqueta Clasable).

HTML:

<button class="my-button-up">Up</button> 
<button class="my-button-down">Down</button> 

jQuery:

$('.my-button-up').click(function(){ 
    var current = $(this).closest('li'); 
    current.prev().before(current); 
}); 
$('.my-button-down').click(function(){ 
    var current = $(this).closest('li'); 
    current.next().after(current); 
});