jQuery 可排序的向上/向下移动按钮

Posted 2023-02-24

【中文标题】jQuery 可排序的向上/向下移动按钮

【英文标题】：jQuery Sortable Move UP/DOWN Button

【发布时间】：2011-02-26 11:21:47

【问题描述】：

我目前有一个运行良好的 jQuery 可排序列表。我可以移动'li'元素。但是，如何制作一个按钮以将特定的“li”元素向上移动一个，而将一个向上移动一个向下移动（当然，向下按钮则相反）？我环顾谷歌，发现很少。即使是链接也会很棒！

谢谢！

【问题讨论】：

第二个答案非常好。第一个答案也不错。为什么不接受？

【参考方案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);
);

【讨论】：

建立在这个好主意的基础上——这是我为向上/向下移动引导 div 所做的一个 jsFiddle 解决方案——jsfiddle.net/lancelarsen/814rteua

【参考方案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/

【讨论】：

如何为li元素做到这一点？

只是一个注释，需要额外的jquery-ui

优秀。我正在寻找这个。

我正在使用你的代码来实现上下功能，但我被困在一个地方。我可以请你帮忙

【参考方案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);
);