使用向上/向下按钮可以对Jquery进行排序 [英] Jquery sortable using UP / Down button

问题描述

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

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

代码（moveUp） ：

  function moveUp（item）{
 var prev = item.prev（）; 
如果（prev.length == 0）返回; 
 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/

I am trying to get sorted order list when user click on up/down button. Here is my demo link 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();
});

Finally I am getting wrong out and It's not in the user's selected order.

Please suggest me the right way to get sorted order list.

解决方案

The issue is because animate is an async function so your sendOrderToServer function will be fired before the animation complete.

You can move the function call inside the animate complete callback and it will work.

Code (of 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/

这篇关于使用向上/向下按钮可以对Jquery进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！