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

2024-01-04

当用户单击向上/向下按钮时,我试图获取排序顺序列表。这是我锻炼的演示链接http://jsfiddle.net/prabud/qy89psbr/ 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();
});

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

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


问题是因为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();
    });
}

Demo: http://jsfiddle.net/IrvinDominin/bvvLurxa/ http://jsfiddle.net/IrvinDominin/bvvLurxa/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery 可使用向上/向下按钮排序 的相关文章

随机推荐