Кнопка сортировки jQuery Move UP/DOWN

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

Спасибо!

Ответ 1

Если у вас есть следующий код html:

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

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

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

Ответ 2

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

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/

Ответ 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);
});