0

jQuery UIでドラッグアンドドロップした後、divをアニメーション化しようとしています。jQuery UI ドキュメント () に従って「停止」イベントを使用しています。

ただし、ドロップされたオブジェクトをアニメーション化できるようにするのに本当に苦労しています。これが私が現在いる場所ですが、うまくいかないように見えるいくつかのことを試しました:

        $('.item').draggable({
            stop: function (event, ui) {
                $(ui.draggable).animate({ bottom: 0 }, { duration: 1000, easing: 'easeOutBounce' });
            }
        });

これは jQuery 1.9.0 と jQuery UI 1.10.0 を使用しています。

私はこれが単純でなければならないと確信しています - 私はそれを働かせることができません。

4

2 に答える 2

1

2 つの問題があります。修正されたコードは次のとおりです。

 $('.item').draggable({
            stop: function (event, ui) {
                $(this).animate({ "top": "0px" }, { duration: 1000, easing: 'easeOutBounce' });
            }
        });

最初 - ui.draggable は実際には何も選択しておらず、undefined を返していました。thisドラッグされた要素に影響を与えるように変更されました。

さらに、jQuery は CSS プロパティを読み取っていませんでしたbottom。top目的の効果を得るには、何らかの方法で使用する必要があります。同様に、left動作しますが、動作しrightません。

フィドル: http://jsfiddle.net/klatzkaj/kjtD8/

于 2013-01-28T15:53:43.437 に答える
0

ui.draggable（何もない）に変更するthisと、ドラッグされたdivに影響します。レイアウトによってはアニメーションが発生しない場合がありますが、これで動作させることができます。

http://jsfiddle.net/T4UDp/

ドラッガブル自体が変化するのでtop、bottom: 0単体では動きません。

于 2013-01-28T15:50:51.540 に答える