Jquery 可使用向上/向下按钮排序

Question

当用户单击向上/向下按钮时，我试图获取排序顺序列表。这是我锻炼的演示链接 http://jsfiddle.net/prabud/qy89psbr/

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

最后我出错了，它不符合用户选择的顺序。

请建议我获取排序订单列表的正确方法。

Answer 1

问题是因为 animate 是一个异步函数，因此您的 sendOrderToServer 函数将在动画完成之前触发。

您可以将函数调用移动到动画完成回调中，它将起作用。

代码(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/