チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル

2007/3/28 22:38

※ 追記 livedoor Readerのものにより近づけたサンプルはこちら。

livedoor ReaderにOPMLをインポートすると登録可能なRSSの一覧が表示されますが、その画面ではチェックボックス上をマウスでなめるようにドラッグするだけでチェックをON/OFFできるようになっています。

かなり不思議なUIなので、これはどうやっているんだろう？と考えてみたのですが、仕組みは簡単でした。

マウスを左クリックしたままチェックボックスの上を移動させてみてください。(JavaScriptが無効なRSSリーダーから見ている場合はページを訪問してください。)

(ドラッグするとテキスト選択されてしまうので、チェックボックスの上でクリックを開始するとテキスト選択されずに済みます。)

ソースは以下の通り。簡単に実装するためにprototype.jsを利用しています。

/* require prototype.js */
if (typeof SAMPLE == "undefined") {
    var SAMPLE = {};
}
SAMPLE.isMousedown = false;
SAMPLE.mousedown = function(e) {
    SAMPLE.isMousedown = true;
}
SAMPLE.mouseup = function(e) {
    SAMPLE.isMousedown = false;
}
SAMPLE.mouseover = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (SAMPLE.isMousedown) {
        if (target.type == "checkbox") {
            target.click();
        }
    }
}
Event.observe(document, "mousedown", SAMPLE.mousedown);
Event.observe(document, "mouseup", SAMPLE.mouseup);
Event.observe(document, "mouseover", SAMPLE.mouseover);

target.typeのみで判定させてますが、実際に実装するときはチェックボックスにclassをつけてclassNameも条件に加えたほうがいいです。mousuoverだけ実装すれば左クリックすらせずにチェックを切り替えられます。

チェックボックスの付近をドラッグしてもチェックを切り替えられるようにするには、チェックボックスを特定のクラス名を持つ要素に格納して、その要素にmouseoverされたらtarget.firstChild.click();とかすればいいです。