Thickboxをドラッグ可能にしてユーザビリティを向上させる

ThickboxとかLightboxでコンテンツや写真を表示するとすっきり見えていいですよね。
でもあのボックス自体が邪魔なときないですか？ちょうど比較したいコンテンツの上に表示されたり…
jQuery UI Draggableを使ってドラッグできるようにしてしまいましょう。

これだけのためにわざわざDraggableを…とかそういうのは抜きにしてドラッグできると結構便利です。
しかもUI Draggableを使えばあっという間にドラッグできるようになります。

…便利じゃないですか？(今回はThickboxを対象にしてます)

サンプル
サンプルファイルのダウンロード

Thickboxをダウンロードする

http://jquery.com/demo/thickbox/

から一式をダウンロードするか、サンプルファイルに全て入ってるのでそれをダウンロードします。

jQuery UI Draggableをダウンロードする

http://jqueryui.com/download

からUI CoreとDraggableを選択してダウンロードするか、サンプルファイルに全て入ってるのでそれをダウンロードします。

必要なファイルを読み込む

thickbox.jsにソースを追加する

thickbox.jsの19～35行目

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
    });
}

の tb_show(t,a,g); の後辺りに

// Make TB Draggable
$('#TB_window').draggable({
        handle: '#TB_title'
});

を追加するだけです。
オプションのhandleでドラッグのハンドル(掴める要素)を決めてます。サンプルでは#TB_titleにしていますが、たとえばハンドル指定をなくすと、#TB_window自体がハンドルになってどこを掴んでもドラッグできるようになります。スクロールバーを動かすときにちょっと不便になるので、ここでは#TB_titleをハンドルに指定しています。ハンドル指定ができる要素はdraggableにする要素の子要素なら何でも、です。

追加したソースは以下になります。

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);

    // Make TB Draggable
    $('#TB_window').draggable({
        handle: '#TB_title'
    });

    this.blur();
    return false;
    });
}

あとはドラッグできることがわかるように、ハンドルのカーソルを変えましょう。

thickbox.cssにソースを追加する

thickbox.cssの103～106行目に#TB_titleがあるので
これにcursor: move; を追加します。

#TB_title{
    background-color:#e8e8e8;
    height:27px;
    cursor: move;
}

ちなみに今回の例では、AjaxコンテンツかInlineコンテンツのようにタイトルを含んだThickboxを対象にしています。タイトルを含まない場合は、draggableオプションのhandle指定をなくすとかハンドル自体を変えればいいです。

サンプル
サンプルファイルのダウンロード