0

動的な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;
});
4

1 に答える 1

1

HTML要素をアニメーション化すると、画面上の位置が変わるだけなので、DOMの要素も交換する必要があります。

スクリプトを完成させました：

$('.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;
});​

ここで実際の動作を確認できます：divを上下にアニメーション化

于 2012-11-06T23:07:47.657 に答える