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

概要

Mozilla で HTML 文書 (など) を表示する際に、 CSS を使って特定の要素 (の箱(ボックス)) をマウスによるドラッグで閲覧者が移動可能にするための XBL 文書です。

はじめに

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

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

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

使い方

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

.movable-element {
  -moz-binding: url('uri/of/drag-xbl.xml#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 は (少なくても左と上は) 零でなければなりません。

License

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

作者の連絡先

メイル・サーバーが使えない状態なので、 suika.robamimi 避難所にご連絡下さい。

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

概要

はじめに

使い方

制限事項

License

作者の連絡先

目次