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

はじめに

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

対象読者

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

動作環境

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

解説の流れ

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

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

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」を使用しています。それぞれのフィールドの意味は以下の通りです。

　これらのフィールドを公開するプロパティを定義します。プロパティは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");
}

　OnPreRenderメソッドの修正により、上記のようなspanタグが出力されるようになりました。プロパティを設定すれば、指定した絶対座標にこのLabelコントロールを配置することができます。

　ついでに、このコントロールにマウスをポイントした際のマウスカーソルも変更しておきました。これによって、このコントロールをドラッグできることをユーザーが直感的に判断できるようになり、ユーザービリティが向上します。