jQuery UIのインタラクションを使ってみよう

jQuery UI／プラグインの活用（1）

要素のドラッグ＆ドロップ

　まずは、「インタラクション」の中からドラッグ操作をしてみましょう。

　ドラッグ＆ドロップ機能の身近な例では、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 実行結果（実行後）