jQueryではじめるAjax

第5回 jQuery UIによるユーザインターフェースの改良

この記事を読むのに必要な時間:およそ 15 分

お気に入りの実装(1)-Draggables / Droppables / Sortables

次は,⁠Draggables」⁠Droppables」⁠Sortables」を使用して,お気に入り機能を実装したいと思います。

図5 お気に入り機能

図5 お気に入り機

ビデオのサムネイル領域の右に表示され,サムネイルからドラッグ&ドロップで,ビデオを追加することができます。また,お気に入り内のアイテムは,マウス操作で並び替えができます。

実装のイメージをつかみやすくするため,先に完成版の第5回サンプルをご紹介します。

お気に入り領域

お気に入りの領域を作成します。以下のようにHTMLを追加しますリスト11⁠。

リスト11 お気に入り領域

<!-- お気に入り -->
<div id="favorites">
    <!-- ヘッダ -->
    <div class="header">
        <div class="submenu"><a id="clear_fav">クリア</a></div>
        <div class="caption">お気に入り</div>
    </div>

    <!-- お気に入りリスト -->
    <ul></ul>
</div>

id=favoritesとしてdiv要素を定義します。⁠お気に入り」というタイトルと,検索履歴を消去するid=clear_favのa要素「クリア」を定義します。また,お気に入りのリストを保持するul要素を定義します。

お気に入りをマウスで並び替え可能にする

お気に入り領域の各要素をマウスで並べ可能にします。sortableメソッドを呼び出すだけで並べ替えが可能になります。とても簡単ですね。 sortableメソッドには様々なオプションが用意されています。UI/Sortables/sortable - jQuery JavaScript Libraryをご覧ください。

お気に入りをマウスで並び替え可能にする実装は次のようになります。
$(function(){・})の初期処理に追加しますリスト12⁠。

リスト12 並び替えを可能にする

$("#favorites > ul")
    // お気に入りを並び替え可能にする
    .append("<li/>").sortable({axis: "y"}).empty()

sortableメソッドのオプションには,axisプロパティに"y"を指定しています。これにより縦方向のみに操作を制限しています。

この処理で,わざわざ,空のli要素を追加append("<li/>")して,最後にli要素を削除empty()しているのは,ソート対象の子要素が存在しない状態でsortableメソッドを実行すると,エラーとなるためです(並び替え要素が変更されたときに実行するsortable("refresh")などでは発生しません⁠⁠。

サムネイルをドラッグ可能にする

次に,サムネイルの各アイテムをドラッグ可能にします。draggableメソッドを呼び出すだけでドラッグが可能になります。とても簡単ですね。 draggableメソッドには様々なオプションが用意されています。

表4 draggableメソッドのオプション(抜粋)

プロパティ説明デフォルト値
axis ドラッグできる方向を制限する。'x'で横方向,'y'で縦方向を指定できる 'x', 'y'
containment ドラッグの範囲を制限する。指定した要素内でのみドラッグが可能になる。'parent'(親要素内⁠⁠,'document'(ドキュメント内⁠⁠,DOM要素,jQueryセレクタを指定できる なし
helper ドラッグ中の表示方法を指定する。'clone'を指定すると,要素を複製して表示するghostingエフェクトが適用される。また,DOM要素を返す関数オブジェクトを指定して,独自のエフェクトを設定することができる 'original'
zIndex ドラッグ要素のz-indexを数値で指定する なし

他のオプションについては,UI/Draggables/draggable - jQuery JavaScript Libraryをご覧ください。

ドラッグを可能にする実装は次のようになります。Youtube.jsのsearchメソッド内でサムネイルを生成している箇所に追加します($.ajaxのsuccessイベントハンドラ。リスト13⁠。

リスト13 ドラッグを可能にする

$("<div/>").addClass("thumbnail")
・・・中略・・・
.draggable({helper: 'clone', zIndex: 10})  // ドラッグを可能にする

helperプロパティに'clone'を指定して,ghostingエフェクトを有効にしました。

また,ドラッグ中の要素が確実に前面に来るように,zIndexを10に設定しました(他のプロパティやDroppablesの設定,ブラウザの組み合わせにより,ドラッグ中に他の要素の後ろに表示されることがあるためです⁠⁠。

サムネイルを掴んで動かしてみてください。

著者プロフィール

池田正一(いけだまさかず)

仕事ではもっぱらJavaを使い,たまにC/C++を書かされ,WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。