ニヤリ

[プログラム関係] HTMLをドラッガブルに

ここでやったHTMLエレメントのドラッグについての技術的メモ。

基本的な動作原理：
各エレメントにIDを付加。
エレメントのOnClickハンドラをJavascriptオブジェクトに流し込む。
スクリプト内ではエレメントのpositionをabsoluteに設定し、マウスポジションにあわせて座標を更新する。

使用スクリプト：
http://www.qyen.org/scripts/dragDiv.js
見ての通りXP風ページのdrag.jsからのちょい変更程度。

機知のバグ：
ieで、縦横のスクロールがされている状態だとマウスのポジションが正確に取れない。

諸悪の根源はこれ。
if (isNaN(parseInt(window.scrollX))==false) ix +=window.scrollX ;


つまり縦横のスクロール量を取得するのに、mozilla風にwindow.scrollX/scrollYを使ってるのが原因。
んじゃieでどう取るのよってのが分からなくて放置してた。

その辺上手いことやってるのがwemaのスクリプト。
中を見てみるとieとmozilla、Operaでそれぞれ取得方法を変えてるみたい。

function getMouseY(e){
if(window.opera) //o6!)
return e.clientY
else if(document.all && document.getElementById && (document.compatMode=='CSS1Compat')) // e6
return document.documentElement.scrollTop+event.clientY
else if(document.all) //e4,e5,e6!)
return document.body.scrollTop+event.clientY
else if(document.layers||document.getElementById)
return e.pageY //n4,n6,m1!)
}

こらきっついな。

＃つーかいい加減各ブラウザ共通で使えるクライアントスクリプト出てくれないかね。

この辺がイベント毎にチェックされるのもかなりアレなんでOO風に書き出してみると

var coordinateHandler = null ;

function onLoad(e){
if(window.opera) //o6!)
coordinateHandler = new OperaHandler();
else if(document.all && document.getElementById && (document.compatMode=='CSS1Compat')) // e6
coordinateHandler = new Ie6Handler();
else if(document.all) //e4,e5,e6!)
coordinateHandler = new OldIeHandler();
else if(document.layers||document.getElementById)//n4,n6,m1!)
coordinateHandler = new MozillaHandler();
}

function getMouseY(e){
return coordinateHandler.clientY
}


こんなとこか。
つーかこんなもんとっととインターフェース策定して、ハンドラをベンダーから出してくれないかな。一々動作検証すんのが面倒。

---

しかし最近はCSSがそれなりに使えるブラウザが増えてきて、HTML+CSS＋Javascriptで遊べることが多くなってきた気がする。

MSNSpacesの設定画面なんかその最たるものか。
IEワールド全快で厳しいけど。

投稿者 和尚 : 2005年05月13日 15:50 | トラックバック