jQuery Sắp xếp di chuyển nút lên/xuống

Question

Tôi hiện có danh sách sắp xếp jQuery hoạt động hoàn hảo. Tôi có thể di chuyển các yếu tố 'li' xung quanh. Tuy nhiên, làm thế nào tôi có thể thực hiện một nút để di chuyển một yếu tố 'li' cụ thể lên một và một ở trên để di chuyển xuống (và tất nhiên đối diện cho một nút xuống)? Tôi đã nhìn xung quanh google và tìm thấy rất ít. Ngay cả một liên kết sẽ là tuyệt vời!

Cảm ơn!

Answer 1

Nếu bạn đã sau mã 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> 

Tôi giả sử bạn có allready cái gì đó để đánh dấu mỗi li s, vì vậy sau tôi giả định đánh dấu li có lớp markedLi; Sau mã nên trong lý thuyết di chuyển yếu tố đó lên hoặc xuống (hoàn toàn chưa được kiểm tra tắt khóa học):

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

Answer 2

Mặc dù câu trả lời bằng cách Azatoth hoạt động tốt, bobby có thể tìm kiếm một hình ảnh động, giống như tôi đã làm. vì vậy tôi đã viết đoạn mã sau để làm cho phong trào hoạt hình:

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

bạn có thể có một cái nhìn ở đây http://jsfiddle.net/maziar/P2XDc/

Answer 3

Dựa trên @azatoth câu trả lời, nếu ai đó muốn có các nút cho mỗi kỷ lục ông có thể làm theo cách này (thay thế thẻ li bằng thẻ Sắp xếp của bạn).

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