【Javascript】jQuery Draggablesで簡単ドラッグドロップ

前回は、プラグインから紹介しましたが 今回は、再度、jQuery UIの中から紹介します。Draggablesです。

極めて手軽にDOM要素をドラッグ可能にしてくれるプラグインです。

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

Draggables

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

<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>

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


ソースは次の通り。

<style type="text/css">
#myDrag { 
  width   : 100px   ; 
  height  : 100px   ; 
  padding : 10px    ; 
  background-color : #B9FF04 ; 
}
</style>

<div id="myDrag">ドラッグできます</div>

<script type="text/javascript">
$j=jQuery.noConflict(); //他のライブラリとの衝突を回避します
   
$j(function($) {
  $('#myDrag').draggable();
});
</script>

このソースでドラッグを指示しているのは、わずかに、$('#myDrag').draggable() の部分だけです。その意味は、

「ID名'#myDrag'の要素をドラッグ可能にする。」ということです。簡単ですね。これが、jQueryの良さです。

では、ソースを順番にみていきます。 まず、ドラッグするDIVをmyDragというID名で用意しました。そして、幅と高さや背景色などをCSSで指定しています。

<style type="text/css">
#myDrag { 
  width   : 100px   ; 
  height  : 100px   ; 
  padding : 10px    ; 
  background-color : #B9FF04 ; 
}
</style>

<div id="myDrag">ドラッグできます</div>

次に、ここでは、前回同様、念のために他のコードとの衝突を避けるためのjQuery.noConflict()を使って ショートカットを$ではなく、$jに取り換えてみていますが、もちろん、これは、必須というわけではありません。

これ以降、prototype.jsなどの$関数などがあれば、その$が機能し、jQueryの$(...)は、$j(...)と書くことで代用できるようになります。

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

そして、$j(function() { から });の間にスクリプトを書きます。 これは、DOMの構築待ち処理で、DOMが構築されるより先にDOM操作が行われてエラーとなるのを回避してくれます。

ただし、今回は少しだけ前回のものと変えてあることに注意してください。 前回は次の通りでしたが、

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

今回はこうです。

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

引数に$を入れてあります。

このDOMの構築待ち関数の引数は、実はjQueryオブジェクトを渡せるようになっているのです。

したがって、このように書くと、関数の外では、他のコードの$関数との衝突を避けて、jQuery.noConflict()で作成した、$jを使いますが、関数内では、普通にjQueryの$関数を使えるのです。

しかも、引数は関数の外からは直接アクセスできませんので、prototype.jsなどの$関数と衝突せずに使えるというわけです。

こう考えると、jQuery用のコードのすべてをこのDOMの構築待ち関数内へ入れてしまうなら$jのようなショートカットをあえて作らずに、普通に次のように書くのも良いかもしれません。

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

このあたりのことについて詳しくはこの記事をご覧ください。

一応、もう一度、今回の実際のコードを見てみましょう。

$j(function($) {
  $('#myDrag').draggable();
});

さて、このドラッグ用のメソッドにも他のプラグイン同様に、引数からオブジェクトを渡すことで、 いくつかのプロパティを設定できるようになっています。 たとえば次のようなものです。

  $('#myDrag').draggable({
    opacity  : 0.5,    //ドラッグ時の不透明度
    cursor   : 'move', //カーソル形状
    axis     : 'y'     //ドラッグ方向
  })

そろそろ慣れてきたと思いますが、jQueryのプラグインやUIでは、メソッドチェーンに連結される各メソッドのふるまいを決めるためのオプションパラメータを、このように、メソッドの引数へオブジェクトのプロパティとして渡すことが少なからず慣習的に行われています。

では、次ページで、これらのオプションを変えたいくつかのサンプルを試してみます。