jQuery Sortable 向上/向下移动按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2951941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Sortable Move UP/DOWN Button
提问by bobby
I currently have a jQuery sortable list working perfectly. I am able to move the 'li' elements around. However, how can I make a button to move a specific 'li' element up by one and the one above to move down (and of course the opposite for a down button)? I have looked around google and found very little. Even a link would be fantastic!
我目前有一个完美运行的 jQuery 可排序列表。我能够移动“li”元素。但是，如何制作一个按钮将特定的 'li' 元素向上移动一个，然后将上面的一个向下移动（当然向下按钮则相反）？我环顾了谷歌，发现很少。即使是链接也会很棒！
Thanks!
谢谢！
回答by azatoth
If you have following html code:
如果您有以下 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>
I assume you have allready something to mark each lis, so following I assume the marked lihas the class markedLi; Following code should in theory move that element up or down (totally untested off course):
我假设您已经准备好标记每个lis，因此接下来我假设标记li有 class markedLi；以下代码理论上应该向上或向下移动该元素（完全未经测试）：
$('#myButtonUp').click(function(){
var current = $('.markedLi');
current.prev().before(current);
});
$('#myButtonDown').click(function(){
var current = $('.markedLi');
current.next().after(current);
});
回答by Maziar Taheri
Although the answer by Azatoth works fine, bobby might be looking for an animation, like I did. so I wrote the following code to make the movement animated:
尽管 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);
});
}
you can take a look in here http://jsfiddle.net/maziar/P2XDc/
回答by Roy Shoa
Based on @azatoth answer, if someone like to have the buttons for every record he can do it in this way (replace the li tag with your Sortable tag).
根据@azatoth 的回答，如果有人喜欢为每条记录设置按钮，他可以通过这种方式进行操作（将 li 标签替换为您的 Sortable 标签）。
HTML:
HTML：
<button class="my-button-up">Up</button>
<button class="my-button-down">Down</button>
jQuery:
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);
});
