Mozilla で簡単に要素の箱を移動可能にする XBL 部品

概要

drag.xblは、 Mozilla で HTML 文書を表示する際に、 CSS を使って特定の要素をマウスによるドラッグで閲覧者が移動可能にするための XBL 部品です。

はじめに

Mozilla (というか Gecko) は、 XBL という言語を使って要素の表現を制御できます。 W3C の CSS (水準 2 まで) では、 表示については基本的に「静的」な指定しかできません。 しかし XBL と組み合わせることにより、 条件判断を含めたり閲覧者の操作に応じた動作を行ったりすることが可能になります。 (実際に現在の Mozilla には、移動文字 (marquee) が XBL を使って実装されています。)

drag.xbl は、要素 (に対応する箱(ボックス)) を閲覧者がマウスのドラッグにより移動可能とするための XBL 部品です。 同じことは JavaScript を文書に直接埋め込んでも実現できます (し実際よく使われています) が、 XBL 化して CSS を通して指定することには、 たとえば次のような利点があります。

• 使用する文書 (HTML が普通ですが、 一般の XML 文書でも機能すると思います。) にスクリプトを埋め込む必要がない (構造と表現の分離)。 これによって文書の管理がしやすくなる。
• 適用対象の要素を CSS の選択子(セレクタ)を使って柔軟に指定できる。
• 閲覧者のスタイル・シートを使って任意の文書に適用させたり、 逆に適用を打ち消したりできる。

また、移動中のスタイル (たとえば、マウス指示子を移動時のものとするとか。) を CSS を使って指定することができます。

使い方

1. まず、 drag.xbl を持っていってください。
2. CSS 形式のスタイル・シートで上記文書を用意した URI を以下の例のように書き入れます。 (なお、ここで使用している -moz-binding 属性は Mozilla (Gecko) の独自拡張です。 もじら組の Mozillaの独自拡張CSSは使わないでくださいという文書に目を通して理解した上でお使い下さい。)
3. 移動可能時及び移動時のスタイルを、必要に応じて合わせて指定しておきます。

.movable-element {
  -moz-binding: url('http://suika.fam.cx/www/style/ui/drag.xbl#simple-drag');
}
/* 移動可能な時、級 DRAGABLE が追加されます。 */
.movable-element.DRAGABLE {
  position: absolute /* または fixed */;
  margin: 0 /* 位置計算の都合上 0 でないといけません。 */;
  top: 4em; /* 例。 */
  left: 1em;
}
/* 移動中の時、級 DRAGING が追加されます。 */
.movable-element.DRAGING {
  cursor: move; /* 例。 */
}

制限事項

• XBL を実装した利用者エージェント (現在の所 Gecko のみ。) 以外に対しては何の効果もありません。
• 移動する箱の margin は (少なくても左と上は) 零でなければなりません。
• うっかり behavior: url('http://suika.fam.cx/www/style/ui/drag.htc') とも書いてしまうと、 WinIE にも対応してしまいます:)
• 適用できる要素型は HTML/XHTML のものだけで、一般の XML 要素には適用できません。 (一般の XML 要素の表示位置を DOM 的に操作する方法が今のところないからです。)

License

• Mozilla 関係のファイルに倣って、 MPL 1.1/GPL 2.0/LGPL 2.1 とします。
• この説明文書は Public Domain です (著作権を主張しません)。

目次

1. 概要
2. はじめに
3. 使い方
4. 制限事項
5. License