0

ページに簡単なドラッグ アンド ドロップ機能があり、要素をターゲット領域にドロップすると、その要素がターゲット領域内の指定された場所にスナップされます。現在、正しい位置で要素にクラスを追加し、(ドラッグ中に要素を配置するために) jQuery が定義した位置スタイリングを削除する「ドロップ」イベント ハンドラーでこれを達成しています。したがって、要素は正しい場所に移動されます。

ただし、要素をすぐに新しい場所に表示するのではなく、ドロップした場所から要素を移動する素敵なアニメーションを要素に与えたいと考えています。問題は、jquery を使用すると、あるスタイルから別のスタイル、またはあるクラスから別のクラスにアニメーション化できますが、スタイルからクラスにアニメーション化できないことです。私はこれをやってみました：

feature.addClass('selected');
feature.animate({
    'top': '',
    'left': '',
    'bottom': '',
    'right': ''
});

「選択された」には、上と左の定義が含まれています。しかし、それは要素を 0,0 に移動することです (私が望むスタイルを削除するプロセスをアニメーション化するのではなく)。

誰も私がこれを行う方法を知っていますか? 要素データに座標を格納することもできますが、CSS で定義する必要があります。または、Javascript を使用して選択した位置を CSS から読み取り、動的に保存する方法はありますか? つまり、「この要素について、選択したクラスを追加した場合、上と左の値はどうなるか」を調べます。

4

2 に答える 2

2

あなたはjQueryを使用しているので、ドラッグアンドドロップ機能を実行するためにjQuery UIを使用していると思います。$.draggable() メソッドには次のようなオプションがあります。

$( "#draggable" ).draggable({ revert: true });

詳細はこちらから: http://jqueryui.com/demos/draggable/#revert

于 2012-09-28T20:49:46.547 に答える
0

@Huangismのアイデアをありがとう、私はそれを次のように動作させました:

  • 非表示の「位置テスター」div を作成しました
  • 初期化中に、ドラッグ可能な各要素からそのdivにクラスをコピーし、それを使用してドロップされる位置をテストしました
  • それらの位置をドラッグ可能な要素に保存しました
  • 次に、ドロップ ハンドラーで要素のスタイルを保存された位置に更新し、アニメーション化できるようにします。
于 2012-09-28T21:19:02.100 に答える