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

概要

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

はじめに

Web のハイパーテキスト文書では、サイト内や文書内の案内や文書の内容に関する補助 (詳細) 情報などの従となる内容が含まれていることが多々あります。 Web ブラウザで文書を表示する時にこのような情報を常時表示しておいた方が利便性が高いこともありますが、そのために本文の表示領域が狭まったり、本文の上に被さったりして、かえって見にくくなることもあります。

この問題の一つの解決策は、文書の補助的な要素をマウスのドラッグによって移動可能とすることです。一般にプログラムでよく使う機能を集めたボタンをドラッグ可能な小さな窓に入れておくという方法はよく用いられており、見た目さえ適切に設計すれば利用者も抵抗なく利用することができるはずです。しかし、現在文書内の要素をドラッグ可能にするための標準的な方法は存在せず、著者が文書ごとにスクリプトを用いて実装する必要がありました。

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

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

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

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

使い方

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

.movable-element {
  -moz-binding: url('https://suika.suikawiki.org/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; /* 例。 */
}

ドラッグ可能にする CSS の指定

制限事項

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

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

概要

はじめに

使い方

制限事項

License

目次