0

現在、ユーザーがアイテムをメールボックスにドラッグできるアプリケーションを作成しています。

アイテムをドロップすると、メールボックスの「後ろ」に新しい画像が作成され、実際にアイテムが落ちているように感じます.

次のコードを使用して、人がアイテムをドロップするたびに新しい画像を作成してアニメーション化します。

function animateDrop(){
animateArray.push($('.animateDrop').clone())
xArray.push(xPos)
yArray.push(yPos)

var foo = animateArray[animateArray.length - 1];
var finalxPos = xArray[xArray.length - 1];
var finalyPos = yArray[yArray.length - 1];

$('body').append(foo);
foo.css({'left': finalxPos, 'top': finalyPos + 40}).fadeIn('slow');
foo.animate({'top': '+=100px'},1500);
};
animateDrop();

コードが実行されると、新しい画像が作成されますが、より多くのアイテムをドロップすると、作成される div が指数関数的に増加します。

どこかで、以前に作成されたすべての div を記憶し、それらすべてを再度本体に追加します (少なくとも、私にはそう見えます)。

私は現在、これを防ぐ方法で立ち往生しています。助けていただければ幸いです。

UPDATE 24-10-2011: animateArray.push($('.animateDrop').first().clone()) 配列 push に .first() を追加すると、複数の div を作成する問題が解決しました。

4

2 に答える 2

1

あなたの仮定は正しいです。元の要素と既にコピーされた要素をもう一度コピーしています。$(".animateDrop") の代わりに別のクラス識別子を使用するか、もうコピーしたくない場合はこのクラスを削除してください

問題に対するより良いアプローチがあるかもしれません - ドラッグ/ドロップ可能でコールバック関数を使用できます ここを見てください: http://jqueryui.com/demos/draggable/

于 2011-10-24T10:01:27.403 に答える
0

first() or :firstクローンを呼び出す前に、jQueryのセレクターを使用するだけです。それでうまくいくはずです。

于 2011-10-24T10:17:57.327 に答える