jQuery Animate div 向上和向下堆栈

Question

我有以下代码来为动态 div 上下设置动画。这个想法是，可能有任意数量的 div 需要在堆栈上上下移动，与上下的 div 交换位置。一旦处于他们的新位置，我需要能够赶上那个新的重新定位的位置。以下代码一次有效，但是一旦较低的 div 向上移动并且较高的 div 向下移动（交换点）到新位置，它们就会停止工作。我该如何设置它，以便他们继续向上遍历堆栈，在他们去的时候交换紧接在上面或下面的那个？一旦完成更新数据库，我还需要知道新职位。我一直在到处寻找，但似乎找不到如何做到这一点。任何帮助将不胜感激。

$('.editUp', this).click(function() {
   thisRowHt = $(this).parents('.rowCont').outerHeight();
   upperRowHt = $(this).parents('.rowCont').prev().outerHeight();
   $(this).parents('.rowCont').animate({'top': '-=' + thisRowHt + 'px'});
   $(this).parents('.rowCont').prev().animate({'top': '+=' + upperRowHt + 'px'});
   return false;
});

$('.editDown', this).click(function() {
   thisRowHt = $(this).parents('.rowCont').outerHeight();
   lowerRowHt = $(this).parents('.rowCont').next().outerHeight();
   $(this).parents('.rowCont').animate({'top': '+=' + lowerRowHt + 'px'});
   $(this).parents('.rowCont').next().animate({'top': '-=' + thisRowHt + 'px'});
   return false;
});

Answer 1

您还应该交换 DOM 中的元素，因为当您为 HTML 元素设置动画时，它们只会改变它们在屏幕上的位置。

我已经完成了你的脚本：

$('.editUp', this).click(function() {

    var this_rowCont = $(this).parents('.rowCont');
    var prev_rowCont = $(this).parents('.rowCont').prev();

    // if this is the first element, it returns
    if (prev_rowCont.length != 1){return false;}

    thisRowHt = this_rowCont.outerHeight();
    upperRowHt = prev_rowCont.outerHeight();

    this_rowCont.animate({'top': '-=' + thisRowHt + 'px'});
    prev_rowCont.animate({'top': '+=' + upperRowHt + 'px'}, function(){

        // this is a callback function which is called, when the animation ends
        // This swap this and previous element in the DOM
        this_rowCont.insertBefore(prev_rowCont);
        this_rowCont.css("top", 0);
        prev_rowCont.css("top", 0);
    });

    return false;
});

$('.editDown', this).click(function() {

    var this_rowCont = $(this).parents('.rowCont');
    var next_rowCont = $(this).parents('.rowCont').next();

    // if this is the last element, it returns
    if (next_rowCont.length != 1){return false;}

    thisRowHt = this_rowCont.outerHeight();
    lowerRowHt = next_rowCont.outerHeight();

    this_rowCont.animate({'top': '+=' + lowerRowHt + 'px'});
    next_rowCont.animate({'top': '-=' + thisRowHt + 'px'}, function(){

        // This swap this and next element in the DOM
        next_rowCont.insertBefore(this_rowCont);
        this_rowCont.css("top", 0);
        next_rowCont.css("top", 0);
    });

   return false;
});​

你可以在这里看到它的实际效果：Animate div up and down