jQuery: позиция элемента перемещения

Question

В каждом div есть две кнопки: выше и ниже. Когда нажимается «более высокий», если этот div не находится в верхнем положении, он перемещается выше оригинала. Когда нажата кнопка «lower», элемент будет перемещен ниже оригинала.

Вопрос: Как элементы могут перемещаться вверх и вниз относительно другого элемента?

<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

Вы можете попробовать что-то вроде этого: http://www.jsfiddle.net/yijiang/hwPPP/

С помощью insertAfter и insertBefore мы можем перемещать родительский элемент кнопок вверх и вниз.

$('#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

Может быть, вы должны смотреть на что-то вроде JqueryUI Сортируемый:

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

В противном случае вы можете использовать следующий()/предыдущий() и InsertBefore()/функции InsertAfter() JQuery вместе:

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