jQuery: Déplacer la position de l'élément

Question

Dans chaque div, il y a deux boutons: supérieur et inférieur. Lorsque l'on clique sur «supérieur», si cette div n'est pas à la position supérieure, elle est déplacée plus haut que l'original. Lorsque vous cliquez sur "inférieur", l'élément sera déplacé plus bas que l'original.

La question est: Comment les éléments peuvent-ils être déplacés de haut en bas par rapport à un autre élément?

<div> 
    <div id="a1">a1<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div> 
    <div id="a2">a2<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div> 
    <div id="a3">a3<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div> 
</div> 

Answer 1

Vous pouvez essayer quelque chose comme ceci: http://www.jsfiddle.net/yijiang/hwPPP/

Avec insertAfter et insertBefore nous pouvons déplacer le parent des boutons de haut en bas.

$('#list').delegate('input[type="button"]', 'click', function() { 
    var parent = $(this).parent(); 

    if(this.value === 'higher'){ 
     parent.insertBefore(parent.prev()); 
    } else { 
     parent.insertAfter(parent.next()); 
    } 

    return false; 
}); 

Answer 2

Peut-être que vous devriez regarder dans quelque chose comme jQueryUI Sortable:

http://jqueryui.com/demos/sortable/

Sinon, vous pouvez utiliser suivant()/précédent() et insertBefore()/insertAfter() fonctions jquery ensemble:

$("#a1").insertAfter($('#a1').next());