jQuery UI逆引きリファレンス
Draggable／Droppableウィジェットでドラッグ＆ドロップ機能を実装するには？
ページ上の指定された要素をマウスでドラッグ＆ドロップできるようにするDraggable／Droppableウィジェットの基本的な使い方を解説。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザーインターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Draggable／Droppableウィジェットを利用することで、ページ上の指定された要素をマウスでドラッグ＆ドロップできるようになります。
さっそく、具体的な例を見てみましょう。以下は、あらかじめ用意した紫色のボックスをドラッグし、黄緑のボックスにドロップできるようにする例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Draggable／Droppableウィジェット</title>
<style type="text/css">
.drag { width: 100px; height: 100px; margin: 30px;
border: solid 1px #333; float:left; }
.drop { width: 480px; height: 200px; margin: 40px;
border: solid 1px #333; background-color:#cf6; }
hr { clear: both; }
</style>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 1ドラッグ＆ドロップ機能を実装
$('.drag').draggable();
$('.drop').droppable();
});
</script>
</head>
<body>
<div id="main">
<div id="drag1" class="drag">Angular.js</div>
<div id="drag2" class="drag">Backbone.jp</div>
<div id="drag3" class="drag">Knockout</div>
<hr />
<div class="drop"></div>
</div>
</body>
</html>
|
ドラッグ＆ドロップを可能にするだけであればカンタン。ドラッグ／ドロップ可能な要素に対して、それぞれdraggable／droppableメソッドを呼び出すだけです（1）。
もっとも、これだけではあまり意味がありませんので、以下では、パラメーターを追加しながら、実際のアプリケーションで利用できるように機能を追加していきます。
ドロップ時の挙動を定義する
まずは、ドラッグ要素をドロップしたときに、ドロップ要素（黄緑のボックス）に「●○がドロップされました」というメッセージを表示してみます。これには、droppableメソッドでdropパラメーターを指定します。
|
$('.drop').droppable({
drop: function(e, ui) {
$(this).html($(this).html() +
ui.draggable.text() + 'がドロップされました。<br />');
}
});
|
dropパラメーターは、要素がドロップ領域にドロップされたときに呼び出されるコールバック関数を表します。ドロップされた要素は、ui.draggableプロパティでアクセスできますので、この例では、そのtextメソッドでドラッグ要素のテキストを取得し、ドロップ領域に表示しています。
一般的なアプリでは、テキストを表示している部分に、ドロップに応じた実処理（例えば、ファイルのアップロードであれば、サーバーへの転送など）を実装することになるでしょう。
その他、Draggable／Droppableウィジェットで利用できる主なイベントは、以下のとおりです。
| ウィジェット | イベント | 発生タイミング |
|---|---|---|
| Draggable | start | ドラッグを開始した |
| stop | ドラッグを終了した | |
| drag | ドラッグしている間 | |
| Droppable | drop | ドラッグ要素がドロップ領域にドロップされた |
| out | ドラッグ要素がドロップ領域から出た | |
| in | ドラッグ要素がドロップ領域に入った |
ドラッグ＆ドロップ時の挙動をカスタマイズする
ドラッグ＆ドロップでの挙動をカスタマイズするために、以下のようなパラメーターが用意されています。
| ウィジェット | パラメーター | 概要 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Draggable | containment | ドラッグ可能な範囲
|
||||||||||
| helper | ドラッグ中の表示方法
|
|||||||||||
| opacity | ドラッグ時の要素の透明度 | |||||||||||
| revert | ドラッグ終了時に元の場所に戻すか | |||||||||||
| Droppable | tolerance | ドロップと見なすタイミング
|
以下は、これらのパラメーターを利用した例です。
|
$('.drag').draggable({
containment: 'parent',
cursor: 'move',
helper: 'clone',
opacity: 0.3,
revert: true
});
$('.drop').droppable({
tolerance: 'fit',
……中略……
});
|
ドロップ可能な要素を制限する
acceptパラメーターを指定することで、ドロップ領域に対してドロップできる要素を制限することもできます。例えば以下はid属性が「drag1」「drag2」の要素だけをドロップ可能にする例です（＝「drag3」はドロップできません）。
|
$('.drop').droppable({
accept: '#drag1, #drag2',
……中略……
});
|
別解として、draggable／droppableメソッドにscopeパラメーターを指定しても構いません。scopeパラメーターを指定すると、互いに同じ文字列を持つものだけをドロップ可能になります。
|
$('#drag1, #drag2').draggable({
scope: 'can',
……中略……
});
$('#drag3').draggable({
……中略……
});
$('.drop').droppable({
scope: 'can',
……中略……
});
|
※以下では、本稿の前後を合わせて5回分（第19回～第23回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
19. AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには？
AutoCompleteウィジェットの候補リストをサーバーサイドで管理し、Ajax経由でそのリストを取得する方法を解説。
20. Selectableウィジェットで選択可能なリストを作成するには？
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
21. 【現在、表示中】≫ Draggable／Droppableウィジェットでドラッグ＆ドロップ機能を実装するには？
ページ上の指定された要素をマウスでドラッグ＆ドロップできるようにするDraggable／Droppableウィジェットの基本的な使い方を解説。
