jQuery可排序上移/下移按钮

Question

我目前有一个完美的jQuery可排序列表.我能够移动'li'元素.但是,如何创建一个按钮将特定的"li"元素向上移动一个,将上面的元素向下移动(当然对于向下按钮则相反)？我环顾谷歌,发现很少.即使是链接也太棒了!

谢谢!

Answer 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>

我假设你已经准备好了标记每个lis的东西,所以我假设标记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 标签）。

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