使用向上/向下按鈕排序的jquery

我想要在用戶點擊向上/向下按鈕時獲得排序順序列表。這是我的演示鏈接我的鍛鍊http://jsfiddle.net/prabud/qy89psbr/使用向上/向下按鈕排序的jquery

function sendOrderToServer() { 
    var items = $(".collection").sortable('toArray'); 
    var itemList = jQuery.grep(items, function(n, i){ 
       return (n !== "" && n != null); 
     }); 
} 

$(".collection").sortable({ items: ".item" }); 

$('button').click(function() { 
    var btn = $(this); 
    var val = btn.val(); 
    if (val == 'up') 
    moveUp(btn.parents('.item')); 
    else 
    moveDown(btn.parents('.item')); 

    sendOrderToServer(); 
});

最後我得到錯誤出來，這不是在用戶的選擇順序。

請建議我獲得排序順序清單的正確方法。

來源

2014-09-22 prabu

這似乎對我來說 – malkassem 2014-09-22 16:01:19

看到輸出後，你點擊下/上按鈕。 – prabu 2014-09-22 16:07:20

問題是因爲animate是一個異步函數，因此您的sendOrderToServer函數將在動畫完成之前觸發。

您可以在animate complete回調中移動函數調用，它將起作用。

（的爲moveUp）代碼：

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

     sendOrderToServer(); 
    }); 
}

演示：http://jsfiddle.net/IrvinDominin/bvvLurxa/

來源

2014-09-22 16:19:43

偉大的作品謝謝:) – prabu 2014-09-22 16:32:55

由於某些原因，我無法看到的ID在改變後的新秩序。我對JsFiddle做了以下更改，以便通過ajax將它們發送到服務器。

function sendOrderToServer() { 
    var arrayOfIds = $.map($(".item"), function(n, i){ 
     return n.id; 
    }); 
    $.ajax({ 
    type: "POST", 
    url: 'sortable.php', 
    dataType: "json", 
    data: { 'item[]': arrayOfIds }, 
    success: function(data){ 
      /* Do something */ 
     } 
    }); 
}

來源

2015-07-03 12:01:07

使用向上/向下按鈕排序的jquery

回答

相關問題