Question

当用户点击向上/向下按钮时，我正在尝试获取排序顺序列表。这是我的演示链接I workout 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函数。

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

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

Answer 2

由于某些原因，我在更改后无法看到新订单中的ID。我对JsFiddle进行了以下更改以获取ID＆amp;通过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 */
        }
    }); 
}

使用向上/向下按钮可以对Jquery进行排序

2 个答案: