特集記事

prototype.jsを利用したドラッグできるWebカスタムコントロール

フリーのJavaScriptライブラリによる動的なASP.NETページの作成支援

2006/03/13 12:00

本稿では、フリーのプロトタイプオブジェクト指向ライブラリであるprototype.jsを利用して、ドラッグが可能なWebカスタムコントロールを作成する方法を紹介します。ドラッグ機能の他に、ブラウザのスクロールに反応して指定した位置に浮遊する機能も付加します。

はじめに

　ネットサーフィンをしているとホームページなどで、ドラッグ＆ドロップ可能な、ふわふわ浮かぶメニューなどを見かけることがあります。例えば菊池さんの工作室のメニューのようなコントロールです。これを実現するASP.NETのカスタムコントロールを作成します。

対象読者

　HTML、StyleSheet、JavaScriptの基礎知識がある人。また、ASP.NETでカスタムコントロールを作成した経験があり、prototype.jsの理解もあることを前提にしています。

動作環境

　prototype.js ver 1.4、ASP.NET 2.0、IE6.0で動作確認しています。それ以外での動作は未確認です。

解説の流れ

　以下の順で解説していきます。

ASP.NETカスタムコントロールの作成
外部JavaScriptファイルへのリンクの方法
prototype.jsの拡張
ドラッグ＆ドロップ機能の実装
浮遊機能の実装

ASP.NETカスタムコントロールの作成

　まずはVisual Studio .NETでWebカスタムコントロールを作成します。Labelコントロールを継承することにし、名前は「MovableFolder」にしましょう。また、次のようにフィールドを定義します。

public class MovableFolder:Label
{
    private Int32 zHorisontalPosition = 0;
    private Int32 zVerticalPosition = 0;
    private Int32 zInterval = 30;
    private Double zSpeed = 1;
    private Boolean zCanDrag = true;
    private Boolean zIsFloat = true;
    private Boolean zFloatHorizontal = true;
    private Boolean zFloatVertical = true;
}

　「z」は私が個人的に使用している内部フィールドのPrefixです。一般的には「_」などが用いられますが、「_」よりも押しやすいので「z」を使用しています。それぞれのフィールドの意味は以下の通りです。

フィールド名	意味
`zHorisontalPosition`	浮遊先の水平座標。ブラウザの左端からの位置。
`zVerticalPosition`	浮遊先の垂直座標。ブラウザの上端からの位置。
`zInterval`	移動処理の呼び出される間隔。小さいほど動きが滑らかになりますが、処理は重くなります。
`zSpeed`	移動スピード。1回の移動処理あたりの距離になります。
`zCanDrag`	ドラッグ可能にするかどうか。
`zIsFloat`	浮遊するかどうか。
`zFloatHorizontal`	水平方向に浮遊するかどうか。
`zFloatVertical`	垂直方向に浮遊するかどうか。

　これらのフィールドを公開するプロパティを定義します。プロパティはVisual Studio 2005を使用しているのであれば、リファクタリング機能を使用して簡単に作成できます。単調な作業なので説明は割愛します。

　LabelコントロールをRenderするとspanタグが書き出されます。このspanタグのコントロールをドラッグ可能にするためには、styleを設定する必要があります。具体的には

<span style="position:absolute;posTop:??px;posLeft:??px"></span>

　というようなHTMLが書き出されるよう、ASP.NETのカスタムコントロールのRendering処理を修正する必要があります。OnPreRenderメソッドをオーバーライドして振る舞いを変更しましょう。

protected override void OnPreRender(EventArgs e)
{
    this.Style.Add("position", "absolute");
    this.Style.Add("posTop", this.VerticalPosition.ToString());
    this.Style.Add("posLeft",this.HorisontalPosition.ToString());
    this.Style.Add("cursor","move");
}