jQuery可排序的上下移动按钮

Question

我目前已经成功实现了一个jQuery可排序列表，可以移动“li”元素。但是，如何创建一个按钮来将特定的“li”元素向上移动一位，并使其上方的元素向下移动（当然，向下按钮则相反）？我在谷歌上查找了很多，但几乎没有发现有用的信息。即使只有一个链接也会很棒！

谢谢！

- bobby

---

第二个答案非常好。第一个答案也不错。为什么你没有接受呢？ - Web_Developer

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>

我假设您已经有了一些方法来标记每个li，因此接下来我假设被标记的li具有类markedLi;以下代码理论上应该能够将该元素向上或向下移动（完全未经测试）：

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

- azatoth

---

基于这个伟大的想法 - 这是我为移动Bootstrap div向上/向下创建的jsFiddle解决方案 - https://jsfiddle.net/lancelarsen/814rteua/ - Lance Larsen - Microsoft MVP

Answer 2

虽然Azatoth的答案可以正常工作，但bobby可能正在寻找像我一样的动画。因此，我编写了以下代码以使移动具有动画效果：

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/

- Maziar Taheri

---

如何为li元素执行此操作？ - anam

只是一个提示，需要额外的 jquery-ui。 - ulkas

太好了。我正在寻找这个。 - Web_Developer

我正在使用你的代码实现上下功能，但是在某个地方卡住了，请问能否请你帮忙解决一下呢？ - Learning-Overthinker-Confused

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

- Roy Shoa