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