F.Ko-Jiの「一秒後は未来」

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

※ 追記 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();とかすればいいです。

関連エントリー

generated by 関連エントリーリストジェネレータ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など