jQuery UI の Droppable プラグインを使った、ドロップできるボックスについての記事。Droppable プラグインのオプション（Options）やイベント（Events）などについても。
実装例（サンプル）
このボックスへドロップすると…
実装例の動作について
「ドラッグ移動ボックス」と書いてあるボックスを、「このボックスへドロップすると…」と書いてあるボックスへドロップすると、「このボックスへドロップすると…」という文が、「ドロップしましたね♪」に変わる。スタイルシートのクラスを追加することで、ボックスの色もハイライト表示となる。
この実装例のソースコードについては、こちら。
オプション（Options）
Droppable プラグインには、オプションが多く存在する。私が良く使うのは、下のオプション。
- addClass
-
ドロップできるボックスにドロップすると、ドロップできるボックスにクラスを追加するオプション。
- activeClass
-
ドロップできるボックスが受け取れるドラッグ移動ボックスをドラッグしている間だけ、ドロップできるボックスにクラスを追加するオプション。
- hoverClass
-
ドラッグ移動ボックスをドラッグし、ドロップできるボックスの上まで移動すると、上にある間だけ、ドロップできるボックスにクラスを追加するオプション。
- accept
-
指定した要素のみをドロップできるようにするオプション。
イベント（Events）
create
ドロップできるボックスを生成したとき。
create: function( event, ui ) { ... }
} );
activate
ドロップできるボックスが受け取れるボックスを、ドラッグしたとき。
activate: function( event, ui ) { ... }
} );
deactivate
ドロップできるボックスが受け取れるボックスのドラッグを放したとき。
deactivate: function( event, ui ) { ... }
} );
over
ドロップできるボックスが受け取れるボックスが、ドロップできるボックスの上に来たとき。
over: function( event, ui ) { ... }
} );
out
ドロップできるボックスが受け取れるボックスが、ドロップできるボックスの上から外れたとき。
out: function( event, ui ) { ... }
} );
drop
ドロップできるボックスが受け取れるボックスを、ドロップできるボックスにドロップしたとき。
drop: function( event, ui ) { ... }
} );