jQuery Droppablesでドロップ処理も超簡単

前回は Draggables でDOM要素をドラッグしました。 今回は、その、ドラッグした要素をドロップしていろいろな処理を行えるようにする jQuery UI 、 Droppablesを紹介します。

前回見たとおり、jQueryではドラッグ処理を簡単に実装できますが、複雑な判定などを伴うドロップ処理も とても簡単に利用することができます。

• jQuery
  • Download jquey.js(-min.js)
• UI/Droppables
  • Droppables デモ
  • ダウンロード jquery.ui-1.0.zip （101 KB Draggablesも含まれています）
• jQueryのダウンロードと設置

Draggables

Droppablesを使うためには、jquery.jsの他にjquery.dimensions.js、ui.mouse.js、 ui.draggable.js、ui.draggable.ext.jsの合計5つのファイルが必要でした。 Droppablesでは、それらに加えて、ui.droppable.js、ui.droppable.ext.jsのファイルが必要になります。 まず、そこから見てみます。

<script src="./jquery.js" type="text/javascript"></script>
<script src="./jquery.dimensions.js" type="text/javascript"></script>
<script src="./ui.mouse.js" type="text/javascript"></script>
<script src="./ui.draggable.js" type="text/javascript"></script>
<script src="./ui.draggable.ext.js" type="text/javascript"></script>
<script src="./ui.droppable.js" type="text/javascript"></script>
<script src="./ui.droppable.ext.js" type="text/javascript"></script>

これらの7つのライブラリを読み、準備が完了します。 では、また簡単なサンプルを作ってみましょう。

左の緑の四角を右のグレーのエリアへドラッグドロップしてみてください。




ドロップすると、グレーのエリアへメッセージが表示されますね。

ソースは次の通り。

<style type="text/css">
#myDrag { 
  width   : 100px   ; 
  height  : 100px   ; 
  padding : 10px    ; 
  background-color : #B9FF04 ; 
  float   : left;
}
#myDrop { 
  width   : 300px   ; 
  height  : 200px   ; 
  padding : 10px    ; 
  background-color : #eee ; 
  float   : right;
}
</style>

<div id="myDrag">ドラッグできます</div>
<div id="myDrop">ドロップしてください</div>
<br clear="all">

<script type="text/javascript">
jQuery.noConflict(); //他のライブラリとの衝突を回避します

jQuery(function($) {

  $('#myDrag').draggable();

  $('#myDrop').droppable({
    accept: '#myDrag',
    drop: function(event,uis) {
      var msg   = "<p>"+ event.target.id
                + " が "+this.id
                + " へドロップされました</p>"
      $(this).append(msg);
    }
  });

});
</script>

このソースでドロップに関する処理を指示しているのは、$('#myDrop').droppable(...) の部分です。 では、次に簡単に、スクリプトをみてみます。

まず、他のコードとの衝突を避けるためのjQuery.noConflict()ですが、 今回は、試しに、ショートカットを使っていませんが、これ自体は特に今回のサンプルだからという意味はありません。

jQuery.noConflict(); //他のライブラリとの衝突を回避します

ショートカットを作らなければ、関数外のグローバルスコープ内では、$やショートカット(前回では$j)ではなく、jQueryを使うだけです。

また、jQuery(function($) {...})関数の引数で jQueryへの参照として$を与えていますので、関数内では、jQueryのショートカットとしての$も普通に使用できます。

jQuery(function($) {
 //ここにスクリプト
});

そして、jQuery(function() { から });の間にスクリプトを書きます。 そこへ最初に出てくる、次のコードは、前回試したDraggablesのメソッドで、ID名がmyDragの要素をドラッグ可能にしてくれます。

  $('#myDrag').draggable();;

そしていよいよ今回の本編Droppablesです。

  $('#myDrop').droppable({
    accept : '#myDrag',
    drop   : function(event,uis) {
      var msg   = "<p>"+ event.target.id
                + " が "+this.id
                + " へドロップされました</p>"
      $(this).append(msg);
    }
  });

このdroppableメソッドがドロップ時の処理を引き受けます。 ふるまいの指定は、draggable同様、主に引数で与えるオブジェクトのプロパティで行われます。

そのacceptプロパティに'#myDrag'とあるのは、このドロップエリアでの ドロップ処理の対象を、ID名 #myDrag のDOM要素に限定するという意味です。

そして、ここでは、次のプロパティ drop へ 書かれた関数で、drop時の動作を指定しています。

ちなみに、event.targetは、イベントを起こした対象要素(ここでは、myDrag)で、IE には本来存在しないプロパティですが、 jQueryの関数内では、クロスブラウザ化されて利用できるようになっています。

また、$(DOM要素).append(HTML)で、検索されたDOM要素の末尾へHTMLを追加します。

$(this).append(msg);

この例では、thisは、#myDropですので、ドロップエリアにこのHTMLが追記されるというわけです。

さて、このドロップ用のメソッドにも前回のドラッグや他のプラグイン同様に、 いくつかのプロパティを設定できるようになっています。 たとえば次のようなものです。

  $('#myDrog').droppable({
    //ドロップ対象のセレクタ文字列または絞り込む関数
    accept      : 'target', 
    //ドラッグし始めたときに、ドロップ側の要素に適用するクラス名
    activeClass : 'actvclass', 
    //hoverしたときに、ドロップ側の要素に適用するクラス名
    hoverClass  : 'hvrclass', 
    //入れ子にされたdroppables上でイベントの伝播を防ぎます
    greedy      : true,//(デフォルト値：false) 
    //ドロップの接触判定モード
    // 'fit'(100%内側),'intersect'(50%内側),
    // 'pointer'(ポインターが内側),'touch'(触れた時)
    tolerance   : 'fit',//(デフォルト値：'intersect')
    //acceptするドラッグ要素のドラッグがstartされると発生する関数
    activate    : function(){},
    //acceptするドラッグ要素のドラッグがstopされると発生する関数
    deactivate  : function(){},
    //ドロップエリアに触れると発生する関数
    over        : function(){},
    //ドロップエリアから離れると発生する関数
    out         : function(){},
    //ドロップされると発生する関数
    drop        : function(){} 
  })

では、次ページで、Droppableの簡単なサンプルを試してみます。