ウェブアプリケーションを開発する際に、ユーザーがインタラクティブな体験を得られるようにすることは重要です。そのためには、ドラッグ＆ドロップのような操作ができるインターフェースを提供することが有効です。この記事では、jQuery UIのdraggableとdroppableを使って、簡単にドラッグ＆ドロップ機能を実装する方法を初心者向けに解説します。特に、WordPressの管理画面にある「外観」→「ウィジェット」のような操作を再現したい方には、非常に役立つ内容となっています。
この技術を使えば、ユーザーが自由に要素をドラッグし、指定されたエリアにドロップできるインターフェースを簡単に作成できます。ドラッグ＆ドロップの操作は、特にダッシュボードや管理画面、カスタマイズ画面など、ユーザーが自由に要素を配置できる環境で役立ちます。この記事を読んで、あなたもこの機能を自分のプロジェクトに取り入れてみてください。
jQuery UIのdraggable・droppableとは
jQuery UIは、jQueryライブラリの拡張として提供される、さまざまなインタラクティブなUIコンポーネントを簡単に実装できるツールキットです。中でも、draggable（ドラッグ可能）とdroppable（ドロップ可能）は、特に使い勝手の良い機能です。
- draggable: 要素をマウスでドラッグできるようにする機能です。これにより、ユーザーは画面上の特定の要素をクリックして、その要素を任意の場所に移動できます。
- droppable: draggableで移動させた要素を、指定したエリアにドロップできるようにする機能です。ドロップエリアに要素がドロップされた際に、特定のアクションを実行することが可能です。
これらの機能を組み合わせることで、ユーザーが直感的に操作できるUIを構築することができます。たとえば、ダッシュボードのウィジェットを自由に配置したり、ショッピングカートに商品を追加する動作を視覚的に行わせることができます。
jQuery UIのdraggable・droppableを使ってボックスエリアをドラッグ＆ドロップするCSSの記述
まずは、ドラッグ＆ドロップのエリアをスタイルするためのCSSコードを用意します。以下のスタイルを使用して、ボックスエリアのデザインを整えていきましょう。
jquery-ui.cssファイルを読み込みます。ドラッグ＆ドロップエリア（#draggable1、#draggable2、#droppable）のCSS記述です。
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.8em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:center;
}
#wrapper{
float: left;
}
#draggable1, #draggable2{
width:100px;
height:100px;
float:none;
margin:20px;
padding:20px;
font-size:12px;
line-height:1.4em;
}
#droppable{
width:300px;
height:300px;
float:left;
margin:20px;
padding:20px;
font-size:16px;
}
-->
</style>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
上記のCSSコードでは、ページ全体のスタイルをシンプルに保ちながら、ドラッグ＆ドロップのエリアを見やすく配置しています。特に、#draggable1と#draggable2はドラッグ可能なボックスとして、#droppableはドロップエリアとして設定しています。これにより、ユーザーがドラッグする要素と、ドロップするエリアが視覚的に区別しやすくなっています。
jQuery UIのdraggable・droppableを使ってボックスエリアをドラッグ＆ドロップするJavaScriptの記述
次に、ドラッグ＆ドロップ機能を実装するためのJavaScriptコードを見ていきましょう。以下のスクリプトを使用して、ドラッグ可能なエリアとドロップ可能なエリアを設定します。
jquery.min.js、jquery-ui.min.jsファイルを読み込みます。$(ドラッグエリア).draggable({オプション})、$(ドロップエリア).droppable({オプション})でドラッグエリアとドロップエリアに対して記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#draggable1').draggable({
cursor: 'move',
revert: 'invalid'
});
$('#droppable').droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').text('ドロップ完了。');
}
});
});
</script>
このJavaScriptコードでは、まずjQueryとjQuery UIのライブラリを読み込み、次に#draggable1要素をドラッグ可能に設定しています。また、#droppableエリアはドロップ可能エリアとして設定されており、ドラッグされた要素がドロップされた際に、特定のクラスを追加してテキストを変更するアクションを定義しています。
このように、簡単なコードでインタラクティブな操作を実現できるため、すぐに使いこなせるでしょう。
ボックスエリアをドラッグ＆ドロップするHTMLの記述
最後に、ドラッグ＆ドロップ機能を実際に動作させるためのHTMLコードを記述します。ドラッグ＆ドロップエリア（id=”draggable1″、id=”droppable”）を用意しました。
以下のコードを使用して、ドラッグ可能な要素とドロップエリアを配置します。
<div id="idWrap">
<h1>小さいボックスを大きいボックスにドラッグできます。<br />ドロップを中止すると元の位置に戻ります。</h1>
<div class="clDemoArea">
<div id="wrapper">
<div id="draggable1" class="ui-widget-content">
<p>このボックスをドラッグして下さい。</p>
</div><!--/draggable1-->
</div><!--/wrapper-->
<div id="droppable" class="ui-widget-header">
<p>ココにドロップして下さい。</p>
</div><!--/droppable-->
</div><!--/clDemoArea-->
</div><!--/idWrap-->
このHTMLコードでは、まずidWrapで全体をラップし、その中にドラッグ可能なボックスとドロップエリアを配置しています。#draggable1と#droppableがそれぞれドラッグエリアとドロップエリアに対応しています。ユーザーは、このページを開いてドラッグ＆ドロップの操作を試すことができます。
jQuery UIのdraggable・droppableを使用しボックスをドラック＆ドロップするデモページ
この機能を試してみたい方のために、デモページを用意しました。実際に動作を確認しながら、どのように実装されているかを理解していただければと思います。
jQuery UIのdraggable・droppableを使用しボックスをドラック＆ドロップするデモページ
このデモページでは、実際にドラッグ＆ドロップの操作を体験できます。コントロールパネルやEC-CUBEのテーマ編集画面のようなインターフェースを作成したい方には、非常に参考になるでしょう。
まとめ
今回は、jQuery UIのdraggableとdroppableを使って、ドラッグ＆ドロップ機能を実装する方法を解説しました。この機能を使うことで、ユーザーが直感的に操作できるインターフェースを簡単に作成することができます。ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させるために、ぜひ活用してみてください。
また、ドラッグ＆ドロップの操作は、ユーザーがカスタマイズ可能なインターフェースを提供する際に非常に有効です。これにより、ユーザーが自身のニーズに合わせて画面を操作できるようになります。初心者でも簡単に実装できるので、ぜひこの機会に挑戦してみてください。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
