ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）

ナビゲーション項目やコンテンツをユーザーが自由にドラッグ移動できるようにしたい場合など便利なのがPrototype Portal Class（protal.js）。Wedgetを作成配置するとドラッグ移動・配置の調整など可能なコンテンツが表示される。

実装するには、prototype.js、scriptaculous.jsも必要になる。ドラッグ中の透過状態や、マウスカーソルなどの指定はスタイルシートで定義することができる。コンテンツのドラッグ制御をprotal.jsに任せ、デザインなどの細かな作りこみはスタイルシートなどで定義する。

Widget機能でコンテンツ表示内容を制御
protal.jsには2種類のprototypeオブジェクトが存在する。1つは前述したコンテンツ要素の配置をマウス操作で可能にするPortal機能。もう１つは、各コンテンツ項目の表示内容を制御するWidget機能。

Wedget要素には、タイトル、コンテンツ内容などを指定することができる。Xilinus.Portal()で作成したレイアウト要素に、Xilinus.Widget()でコンテンツを追加して利用する。

一見複雑そうに思えるが、サンプルを参考にすれば実際の利用方法やドキュメントに紹介されている機能の一部が利用されているのでわかりやすい。サンプルコードなどをダウンロード形式で用意したので試してみてください。