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

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

要素のドロップ

　続いて、要素のドロップをしてみましょう（リスト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 実行結果（ドロップ後のアラート表示）