第6章　「ドラッグの処理」

jQueryは標準ではUI (ユーザーインターフェース) まわりのメソッドがあまり用意されていません。例えばドラッグ処理やアコーディオンやタブパネルの処理などです。このUIまわりの処理はjQuery UIが行なうようになっています。jQuery UIは以下のページからダウンロードすることができます。

http://ui.jquery.com/

ダウンロードするとフォルダ内にはいくつものファイルが展開されます。必要に応じてファイルを選択して使うようになっています。
まず、簡単なドラッグ処理を行なってみます。ドラッグ処理にはui.mouse.js、ui.draggable.js、ui.draggable.ext.jsの3ファイルが必要になります。このファイルを読み込ませる時には必ず、この順番で読み込ませてください。
jQuery UIはjQueryオブジェクトにメソッドを追加するプラグインという形を採用しています。このため、エレメントをドラッグするメソッドが新たに追加されることになります。このドラッグ処理のメソッドはdraggable()になります。 サンプル1はID名がmyAreaのエレメントをドラッグできるようにします。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQuery UIの処理</p>
<div id="myArea">ここがドラッグできます</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
#myArea {
background-color:yellow;
width:240px;
height:160px;
}


【JavaScript】
$(function(){
$("#myArea").draggable();
});


特定のID名を持つエレメントだけでなく、特定のクラスを持つエレメントを対象にすることができます。jQuery UIはプラグインの形なので$()で指定するパラメータをドラッグしたいクラス名を記述するだけで済みます。非常に簡単にドラッグ処理を実現できます。
サンプル2では4つのエレメントをドラッグすることができます。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQuery UIの処理</p>
<div class="dArea">(1) ここがドラッグできます</div>
<div class="dArea">(2) ここがドラッグできます</div>
<div class="dArea">(3) ここがドラッグできます</div>
<div class="dArea">(4) ここがドラッグできます</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.dArea {
background-color:yellow;
width:120px;
height:100px;
}


【JavaScript】
$(function(){
$(".dArea").draggable();
});

[目次へ]