要素のドラッグ＆ドロップ
まずは、「インタラクション」の中からドラッグ操作をしてみましょう。
ドラッグ＆ドロップ機能の身近な例では、iGoogleでのコンテンツ移動が挙げられます。iGoogleは自分専用にカスタマイズできるGoogleページです。ニュースや天気予報など気になるコンテンツを追加することができます。その他にもICON DOCKというサイトでは、商品をドラッグ＆ドロップでショッピングカートに入れることができます。
このように、ドラッグ＆ドロップ機能を利用することで、ユーザー操作がより直感的になります。
要素のドラッグ
ドラッグの使用例をリスト2に示します。
［リスト2］ドラッグの使用例（jQueryUI_drag.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>
// 1. ドラッグ対象となるオブジェクトのCSS
<style type="text/css">
.square {
width: 100px;
height: 100px;
background-color: red
}
</style>
// 2. jQuery、jQueryUIライブラリのロード
<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">
// 3. draggableメソッドの使用例
<!--
$(function () {
$("#square").draggable();
});
//-->
</script>
</head>
// 4. ドラッグ要素の指定
<body>
<h1 id="title">ドラッグ＆ドロップサンプル</h1>
<div id="square" class="square">マウスでドラッグし、移動させてください</div>
</body>
</html>
1では、ドラッグ対象となるオブジェクトのCSSを指定しています。また、2では、jQueryとjQuery UIのライブラリをロードし、要素をドラッグするには3のように「draggable」メソッドを呼び出します。ドラッグ対象となる要素は、4のようにbody部分にタグを用意します（図1と図2を参照）。
図1 実行結果（実行前）
図2 実行結果（実行後）
