jQuery Sortable上移/下移按钮

Question

我目前有一个完美的jQuery排序列表。我能够移动'李'元素。然而，我怎样才能让一个按钮将一个特定的'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> 

我假设你有一些媒体链接标记每个li S，所以下面我想标记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回答一下，如果有人喜欢有按钮每次他可以做记录它以这种方式（用您的Sortable标签替换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); 
});