jQuery Sortable Bouton de déplacement vers le haut/vers le bas

Question

J'ai actuellement une liste triable jQuery qui fonctionne parfaitement. Je suis capable de déplacer les éléments 'li'. Cependant, comment puis-je faire un bouton pour déplacer un élément 'li' spécifique d'un et l'autre dessus pour descendre (et bien sûr le contraire pour un bouton bas)? J'ai regardé autour de google et trouvé très peu. Même un lien serait fantastique!

Merci!

Answer 1

Si vous avez le code html suivant:

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

Je suppose que vous avez quelque chose à marquer allready chaque li s, donc je suppose que suivant la marque li a la classe markedLi; code suivant devrait théoriquement déplacer cet élément vers le haut ou vers le bas (totalement non testé hors cours):

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

Answer 2

Bien que la réponse par Azatoth fonctionne très bien, bobby pourrait être à la recherche d'une animation, comme je l'ai fait. j'ai donc écrit le code suivant pour rendre le mouvement animé:

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

vous pouvez jeter un oeil ici http://jsfiddle.net/maziar/P2XDc/

Answer 3

Sur la base de @azatoth réponse, si quelqu'un aime avoir les boutons pour chaque enregistrement qu'il peut faire De cette façon (remplacez l'étiquette li avec votre tag Sortable).

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