Кнопка jQuery Sortable Move UP / DOWN - PullRequest
Новая
       11

Кнопка jQuery Sortable Move UP / DOWN

23 голосов
/ 01 июня 2010

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

Спасибо!

Ответы [ 3 ]

67 голосов
/ 01 июня 2010

Если у вас есть следующий 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 с, поэтому после я предполагаю, что отмеченный li имеет класс markedLi; Следующий код должен теоретически переместить этот элемент вверх или вниз (полностью непроверенный с курса): 

$('#myButtonUp').click(function(){
  var current = $('.markedLi');
  current.prev().before(current);
});
$('#myButtonDown').click(function(){
  var current = $('.markedLi');
  current.next().after(current);
});
39 голосов
/ 16 мая 2013

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

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/

4 голосов
/ 21 декабря 2015

На основании ответа @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);
});
...