要素のドロップ
続いて、要素のドロップをしてみましょう（リスト3）。
［リスト3］ドロップの使用例（jQueryUI_drop.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ドラッグサンプル</title>
<style type="text/css">
.square {
width: 100px;
height: 100px;
background-color: red;
}
// 1. ドロップされる領域のCSS
.drop {
width: 100px;
height: 100px;
background-color: yellow;
}
// 2. ドロップ状態時のCSS
.droppable-active {
background-color: blue;
}
// 3. ドロップ後のCSS
.dropped {
background-color: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
<!--
$(function () {
$(".square").draggable();
// 4. droppableメソッドの使用例
$("#drop0").droppable(
{ accept: '.square',
activeClass:'droppable-active',
hoverClass: 'dropped',
drop: function (event, ui) {
alert("ドロップされたid属性:" + ui.draggable.attr("id"));
}
}
);
});
//-->
</script>
</head>
<body>
<h1 id="title">ドラッグサンプル</h1>
<div id="square" class="square">マウスでドラッグし、移動させてください</div>
<hr />
// 5. ドロップ領域の指定
<div id="drop0" class="drop">ドロップ領域</div>
</body>
</html>
リスト1にドロップされる領域（1）とドロップ状態時（2）、ドロップ後（3）のCSSを追加します。
要素をドロップするには、4のように「droppable」メソッドを呼び出します。ドロップ処理はドラッグと合わせて使用されます。droppableオブジェクトで使用可能なオプションのうち、代表的なものを表3に示します。
表3：droppableオブジェクトの設定
| 値名 | 概要 |
| accept | ドロップ可能なオブジェクトを指定できる |
| activeClass | ドラッグ要素がドラッグ状態にある場合に、指定したclass名をドロップ要素に追加する |
| hoverClass | ドラッグ要素がドロップ要素の上に乗った場合に、指定したclass名をドロップ要素に追加する |
| drop:function(event,ui){・・・} | ドロップした時の処理を記述する |
この例では、ドラッグ対象オブジェクト（赤色）をドラッグしている間はドロップ領域（黄色）が青色に変化し、ドロップ領域の上に乗ると緑色に変わります。ドロップ後は、ドラッグされたid属性をアラート表示させています。ドロップ領域は、5のようにbody部分にdropタグを追加しておきます。
図3 実行結果（実行前）
図4 実行結果（ドラッグ時）
図5 実行結果（ドロップ領域上に乗った場合）
図6 実行結果（ドロップ後のアラート表示）
