Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/03/13 12:00

ダウンロード MovableFolder.zip (87.9 KB)

本稿では、フリーのプロトタイプオブジェクト指向ライブラリである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」を使用しています。それぞれのフィールドの意味は以下の通りです。

フィールド名意味
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");
}

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

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2006/03/15 22:46 ●ドラッグ機能の実装方法 ■作成したメソッド呼出し部分の作成 のサンプルコードにDragEndを追加修正

著者プロフィール

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5