jQuery Sortable Move UP/DOWN Button

Question

В настоящее время у меня есть отсортированный список jQuery, который отлично работает. Я могу перемещать элементы «li». Тем не менее, как я могу сделать кнопку для перемещения определенного элемента «li» вверх на один и один выше, чтобы двигаться вниз (и, конечно, наоборот для кнопки «вниз»)? Я просмотрел Google и нашел очень мало. Даже ссылка была бы фантастической!

Спасибо!

Answer 1

Если вы нижеприведенный код:

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

Я предполагаю, что у вас есть что-то Allready маркировать каждый li с, поэтому я предполагаю, что следующий отмеченная li имеет класс markedLi; После кода в теории должно переместить этот элемент вверх или вниз (полностью непроверенные от курса):

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

Answer 2

Хотя ответ на Azatoth работает отлично, бобби может искать для анимации, как я сделал. поэтому я написал следующий код, чтобы сделать движение анимированный:

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

вы можете посмотреть здесь http://jsfiddle.net/maziar/P2XDc/

Answer 3

На основе @azatoth ответ, если кто-то хотел бы иметь кнопки для каждой записи он может сделать (таким образом, замените тег li тегом 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); 
});