このページの本文へ

ドラッグ&ドロップメニューに使える「Sortable」

jQuery UIでiGoogleふうメニューを作ろう!

2009年06月10日 14時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
本文印刷
Sortable
jQuery UIのSortableを使えば、iGoogleのようなドラッグ&ドロップUIを手軽に作れる

 Ajaxを使った今どきのWebアプリケーションでは、グーグルの「iGoogle」のように、ドラッグ&ドロップによる直観的な操作でページ内の要素を自由に並べ替えられるユーザーインターフェースをよく見かけます。最近ではWebアプリケーションだけでなく、ポータルサイトやメディアサイトのナビゲーションメニューにも採用されるケースが目立ってきました。

 今回は、jQueryの「Sortable」を使って、ドラッグ&ドロップで要素を並べ替えられるようにする方法を紹介しましょう。Sortableを使えば、ごく簡単な方法で既存のWebページにドラッグ&ドロップUIを実装できます。


Sortableをダウンロードしよう

 「Sortable」は、リスト(ulli)などの個々の要素をドラッグ&ドロップ操作でユーザーが並べ替えられるようにするライブラリです。以前紹介した(関連記事)jQueryのUIライブラリ集「jQuery UI」の機能の1つで、並べ替えの動作を細かくカスタマイズできるのが特徴です。

 Sortableは、jQuery UIのダウンロードページから入手できます。ダウンロードの際にはコンポーネントを選べますが、Sortableだけを使う場合は、「UI Core」「Draggable」「Sortable」の3つのコンポーネントで十分です。

「UI Core」「Draggable」「Sortable」の3つのコンポーネントをダウンロードする
「UI Core」「Draggable」「Sortable」の3つのコンポーネントをダウンロードする

 ダウンロードしたファイルを解凍すると、jQuery本体/jQuery UI/スタイルシートのファイルと、スタイルシートで使っている画像のファイルができます。これらのファイルをサーバーにアップロードします。

 なお、スタイルシートのファイルと画像のフォルダは、フォルダの位置関係が変わらないようにしてください。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く