2011-07-10 11 views
-1

特に、jQueryを使用してドラッグアンドドロップします。jQuery関数に含まれるDOM要素を変更する

1)ドラッグされている/ドロップ:

     $(".note").droppable({ 
          drop: function() { 

          } 
         }); 

はどのようにしていることをDOM要素を得るのですか?

2)落としていますか?

今後の質問:どのように私は自分自身でこの質問に答えることができたかに関する任意の提案?

+0

ドキュメントを見ましたか? – Marcin

+0

draggableとdroppableプラグインとjQueryの一般的なメモの両方について、ええ。ウェブ開発は、私がアプリケーションの何年も前に出てくるので、今私には少し威圧しています。 – Jeremy

答えて

1

次の2つの引数、eventuiを受け入れる機能を持つドラッグ可能のdropイベントをフックした場合は、その後、thisは上のドロップされたドロップ可能なドラッグの生のDOM要素であり、そしてui.draggableはドラッグ可能です。 the docs on the drop eventから

受け入れドラッグは、このドロップ可能(の許容範囲内で)「上」削除されるときに、このイベントがトリガされます。コールバックでは、$(this)は、ドラッグ可能なドロップ可能なドロップ可能オブジェクトを表します。 ui.draggableはドラッグ可能です。

があり、彼らはドロップ可能で$(this)であると述べましたが、彼らはあなたがそれに巻き付けjQueryのインスタンスをしたいと仮定しているからです。 thisは生のDOM要素になります。

例えば:アクション上記との例の

$("your selector here").droppable({ 
    drop: function(event, ui) { 
     // this = raw DOM element of droppable 
     // $(this) = creates jQuery wrapper around the DOM element 
     // `ui.draggable` = draggable 

     // Let's make the draggable red, and the droppable blue: 
     ui.draggable.css("color", "red"); 
     $(this).css("color", "blue"); 
    } 
}); 

Here's a live copy 1。

+0

ありがとう。私はまだ、その関数の引数が(イベント、UI)の理由についてはっきりしていませんが、これは確かに機能します。私は実際にドキュメントでこれを読んでいましたが、私はスコープ内で定義されていなかったため、JavaScriptエラーを取得していたので、動作させることができませんでした。 – Jeremy

+1

@Jeremy:引数は 'event'と' ui'です。なぜならそれがjQuery UIライブラリで定義されているからです。 :-)これはAPIの定義方法です。 JQuery UI(jQuery、jQuery UIではなく)のほぼすべての「イベント」スタイルのコールバックには、これらの2つの引数が与えられます。 'ui'オブジェクトの内容は、イベントが関係するオブジェクト(ドラッグ可能、ドロップ可能、ダイアログ、オートコンプラなど)に応じて変化しますが、通常はそれが文書化されます。 jQuery UIのドキュメント –

関連する問題