YUIによるドラッグ＆ドロップ

HTMLコーディング業務というものの準備の過程で、私がサンプルとして「一つのHTMLに対し、CSSを変えるだけで劇的にレイアウトが変わるんですよ」的なHTMLを構築中。
その過程で、どうせやるなら何か面白いものが一つほしいなと思い、YUIに手を出してみた。
レイアウトはいじれず（というかいじる対象のHTMLが無い）、CSSが変わるだけなのだが、YUI実装版がこちら。
http://tsuge.cuvel.com/blog/yui_sample/

この手のUIが5分程度で実装できる。
やっているのは以下の通り。

<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="dragdrop-min.js"></script>

(function() {
	var dd;
	YAHOO.util.Event.onDOMReady(function() {
		dd = new YAHOO.util.DD("control_panel");
		dd.setHandleElId("control_panel_titlebar");
	});
})();

onDOMReady内で初期化処理を行い、「control_panel」が実際にドラッグ＆ドロップで移動させるもの、control_panel_titlebarがそれを移動させるためのハンドル。ハンドルを利用している部分を削除すれば、移動させるもの全体がドラッグ対象となる。
YUIはもちろん他にも様々な使い方があるのだが、ブラウザ間の相違で私の経験上最も苦労するのはこのドラッグ＆ドロップ。offsetなんたらを意識しなくていいし、スクロール位置も意識しなくていいしで、このドラッグ＆ドロップ機能だけでもYUIを利用する価値はある。

なお、サンプルのlayout.js内にはブラウザごとに異なるCSS切り替えの処理も入っている。
IE6の場合（7は検証してない）、link要素のhrefを切り替えまくっているとなぜかブラウザが落ちるので、alternate stylesheetを利用して他のCSSを無効化することで有効なCSSを切り替える。
FireFox、Operaはlink要素のhrefを切り替えるだけでOKなのでそれで対応。
Chrome（WebKit全般かな？）は、なぜかalternate stylesheetが一つあると他のstylesheetも全てalternate stylesheetとして扱うようなので、面倒くさいから今回の例ではalternate stylesheetをChromeの場合は初期化時に全部削除し、残ったlink要素のhrefを切り替えるという手で実装した。
こういうブラウザ判定も、YUIの「YAHOO.env.ua」を利用すれば楽。

ソースコードも非常に読みやすく、さすがという印象。
最近話題になっていたdocumentオブジェクト参照時の低速化が気になるくらいなので、パフォーマンスマニアの人はvar doc = document;を一個入れて、JS内のdocumentを全部docに変えればいいんでないのという感じ。
継承の仕組みなんかも当然実装してあるので、YUIさえあればprototype.jsも別にいらんのではないかな。