jQuery Sortable Taşıma YUKARI/AŞAĞI Düğme

Question

Şu anda kusursuz çalışan bir jQuery sıralanabilir listeye sahibim. 'Li' elemanlarını etrafta taşıyabiliyorum. Bununla birlikte, belirli bir 'li' elemanını yukarı ve aşağı doğru hareket ettirmek için yukarı doğru hareket ettirmek için bir düğme nasıl yapabilirim (ve elbette bir aşağı düğmenin tersi)? Google'a baktım ve çok az şey buldum. Bir link bile harika olurdu!

Teşekkürler!

Answer 1

aşağıdaki varsa html kodu:

<button id="myButtonUp">myButtonTextForUp</button> 
<button id="myButtonDown">myButtonTextForDown</button> 
<ul> 
    <li>line_1</li> 
    <li>line_2</li> 
    <li>line_3</li> 
</ul> 

Ben bu yüzden işaretlenmiş li sınıf markedLi olduğunu varsayalım aşağıdaki, her li s işaretlemek için allready şey var varsayalım; kodunu takiben teoride yukarı veya aşağı (tamamen denenmemiş ders dışı) o öğeyi hareket etmelidir: Azatoth tarafından cevap çalışıyor

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

Answer 2

rağmen benim yaptığım gibi, Bobby, bir animasyon için arıyor olabilir. Birisi yapabildiği her kayıt için düğmeleri isterseniz

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

Eğer @azatoth cevap dayanarak http://jsfiddle.net/maziar/P2XDc/

Answer 3

Buraya bir göz atabilirsiniz: bu yüzden hareket animasyonlu yapmak için aşağıdaki kodu yazdım bu şekilde (li etiketini Sortable etiketinizle değiştirin).

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