Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

Draggable/Droppableウィジェットでドラッグ&ドロップ機能を実装するには?

2013年12月5日

ページ上の指定された要素をマウスでドラッグ&ドロップできるようにするDraggable/Droppableウィジェットの基本的な使い方を解説。

  • このエントリーをはてなブックマークに追加

jQuery UIとは?

 jQuery UIは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、ユーザーインターフェイス(UI)に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。

 Draggable/Droppableウィジェットを利用することで、ページ上の指定された要素をマウスでドラッグ&ドロップできるようになります。

 さっそく、具体的な例を見てみましょう。以下は、あらかじめ用意した紫色のボックスをドラッグし、黄緑のボックスにドロップできるようにする例です。

HTML
<!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>
要素をドラッグ&ドロップするための基本的なコード(drag.html)
マウス操作でボックスをドラッグ&ドロップ可能に

 ドラッグ&ドロップを可能にするだけであればカンタン。ドラッグ/ドロップ可能な要素に対して、それぞれdraggable/droppableメソッドを呼び出すだけです(1)。

 もっとも、これだけではあまり意味がありませんので、以下では、パラメーターを追加しながら、実際のアプリケーションで利用できるように機能を追加していきます。

ドロップ時の挙動を定義する

 まずは、ドラッグ要素をドロップしたときに、ドロップ要素(黄緑のボックス)に「●○がドロップされました」というメッセージを表示してみます。これには、droppableメソッドでdropパラメーターを指定します。

JavaScript
$('.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/Droppableウィジェットで利用できるイベント

ドラッグ&ドロップ時の挙動をカスタマイズする

 ドラッグ&ドロップでの挙動をカスタマイズするために、以下のようなパラメーターが用意されています。

ウィジェットパラメーター概要
Draggable containment ドラッグ可能な範囲
設定値概要
false 制限なし
parent 親要素の範囲内
document ドキュメント内
要素オブジェクト 指定の要素内(Element、jQueryオブジェクト)
helper ドラッグ中の表示方法
設定値概要
original ドラッグ要素そのものを表示
clone ドラッグ要素のコピーを表示
opacity ドラッグ時の要素の透明度
revert ドラッグ終了時に元の場所に戻すか
Droppable tolerance ドロップと見なすタイミング
設定値概要
fit 完全にドロップ領域に入った
intersect 要素の半分以上がドロップ領域に入った
pointer ポインターがドロップ領域に入った
touch ドラッグ要素が一部でもドロップ領域に触れた
ドラッグ&ドロップの挙動に関わるパラメーター

 以下は、これらのパラメーターを利用した例です。

JavaScript
$('.drag').draggable({
  containment: 'parent',
  cursor: 'move',
  helper: 'clone',
  opacity: 0.3,
  revert: true
});
$('.drop').droppable({
  tolerance: 'fit',
  ……中略……
});
ドラッグ&ドロップの挙動に関わるパラメーターを利用したコード例
移動時は要素のコピーを表示、アイコンは十字型に

ドロップ可能な要素を制限する

 acceptパラメーターを指定することで、ドロップ領域に対してドロップできる要素を制限することもできます。例えば以下はid属性が「drag1」「drag2」の要素だけをドロップ可能にする例です(=「drag3」はドロップできません)。

JavaScript
$('.drop').droppable({
  accept: '#drag1, #drag2',
  ……中略……
});
acceptパラメーターで指定された要素だけをドロップ可能

 別解として、draggable/droppableメソッドにscopeパラメーターを指定しても構いません。scopeパラメーターを指定すると、互いに同じ文字列を持つものだけをドロップ可能になります。

JavaScript
$('#drag1, #drag2').draggable({
  scope: 'can',
  ……中略……
});
$('#drag3').draggable({
  ……中略……
});
$('.drop').droppable({
  scope: 'can',
  ……中略……
});
scopeパラメーターが等しいもの同士がドラッグ&ドロップ可能

※以下では、本稿の前後を合わせて5回分(第19回~第23回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery UI逆引きリファレンス
19. AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには?

AutoCompleteウィジェットの候補リストをサーバーサイドで管理し、Ajax経由でそのリストを取得する方法を解説。

jQuery UI逆引きリファレンス
20. Selectableウィジェットで選択可能なリストを作成するには?

マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
21. 【現在、表示中】≫ Draggable/Droppableウィジェットでドラッグ&ドロップ機能を実装するには?

ページ上の指定された要素をマウスでドラッグ&ドロップできるようにするDraggable/Droppableウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
22. Progressbarウィジェットでプログレスバーを作成するには?

時間のかかる処理の進行状況をユーザーに対して通知できるProgressbarウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
23. Tooltipウィジェットでツールチップを表示するには?

対象要素にマウス・ポインターを当てるとポップアップするツールチップを実装できるTooltipウィジェットの基本的な使い方を解説。

サイトからのお知らせ

Twitterでつぶやこう!