2009年8月21日金曜日

jQuery UI Sortable とダブルクリック・イベント

jQuery UIプラグインについてのメモ。
バージョンは、jQuery 1.3.2、jQuery UI 1.7.2

jQuery UIプラグインのうちSelectableは、あらかじめ指定した要素をマウスのドラッグにより擬似的に選択できるようにしてくれる。
要素選択の動作中、点線で縁取られた透明のDIV要素(class属性はui-selectable-helper)を画面最前面に表示して、マウスカーソルの移動にあわせてこのDIVのサイズを変更、選択範囲を指定できるようになっている。そして選択動作(マウスのドラッグ動作)の終了後、その指定範囲にあった要素に選択されたことを示すclass属性(ui-selected)を追加する。

このSelectableの動作自体はすばらしいのだが、これによってSelectableの対象として指定した要素では、ダブルクリック(dblclick)などのイベントがキャンセルされてしまう。
現状では、Selectableにこれを回避するようなオプションは用意されていないので、擬似的に“ダブルクリック・イベント的状況”を判定するしかない。

var prev_target;
var dblclick_callback = function(...){ ... };
var selectable = $({String} selector) . selectable({
stop: function(event){

var selected = $('.ui-selected', selectable);/* stop イベントには、引数として選択された要素へのアクセス手段が提供される、ということがないので一々選択されている要素を取得 */

if(selected.length === 1){ /* 選択されている要素が1つだけ*/
if(prev_target /* 前回の選択要素が保持されていて(undefinedでなくて)、*/
&& selected.get(0) === prev_target /* 前回の要素と今回のそれが同じ */){

var dblclick_event = ... /* 必要ならばカスタム・イベントオブジェクトなどを作成 */
dblclick_callback . call(prev_target, dblclick_event, {selected: selected});/* (疑似)ダブルクリックイベント用のイベントリスナ関数を呼び出す */

}else{ /* 前回の選択要素が保持されていない場合 */

prev_target = selected.get(0);
window.setTimeout(function(){ prev_target = undefined; }, 250); /* 一定時間(この場合250ミリ秒)経過したら、この回の選択要素への参照を削除 */

}
}

/* 以降は本来の選択動作についての処理を適当に */

}
});

0 件のコメント: