［ASP.NET AJAX］DragPanelコントロールでドラッグ可能なパネルを定義するには？［2.0のみ、C#、VB］

.NET TIPS

［ASP.NET AJAX］DragPanelコントロールでドラッグ可能なパネルを定義するには？［2.0のみ、C#、VB］

山田祥寛
2007/12/20

　DragPanelコントロール（DragPanelExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、ASP.NET標準のPanelコントロールを拡張し、マウスによるドラッグが可能なパネル（以降、ドラッグ・パネル）を生成するためのコントロールだ。

（パネルをドラッグする）

DragPanelコントロールによるドラッグ・パネルの実装

マウスでページ上のパネル位置を自由にドラッグ＆ドロップで移動させることができる。

　DragPanelコントロールの動作自体は明快なので、以下ではさっそく、上の画面のようなドラッグ・パネルをASP.NETページに実装する手順を見ていくことにしよう。

　なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. 新規のWebフォームを作成する

　新規のWebフォーム（DragPanel.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。

Webフォーム（DragPanel.aspx）のフォーム・レイアウト

配置するコントロールは以下のとおり。

		ToolkitScriptManagerコントロール（manager）。
		Divタグ（dbase）。
		Panelコントロール（pnl）。
		Panelコントロール（pHeader）。
		Panelコントロール（pContents）。
		DragPanelコントロール（dpe）。

　DragPanelコントロールを利用する場合、ドラッグ・パネル全体、ヘッダ部分、コンテンツ（本体）部分を表す3つのPanelコントロールを配置しておく必要がある（ここではそれぞれpnl、pHeader、pContents）。また、ドラッグ・パネル全体を<Div>タグでくくっておく必要があるので、注意してほしい（筆者の環境では、この<Div>タグを定義していない場合、正しくドラッグ機能が動作しなかった）。

　また、ヘッダ部、コンテンツ部にはそれぞれ適当なテキストを入力しておこう。

2. コントロールのプロパティ情報を設定する

　次に、ページに配置したサーバ・コントロールのプロパティを以下の表の要領で設定する。

コントロール（ID）	プロパティ	設定値
ToolkitScriptManager（manager）	－	－
Div（dbase）	style	height:200px;width:200px
Panel（pnl）	Width	200px
Panel（pHeader）	BorderColor	Black
	BorderStyle	Solid
	BorderWidth	1px
	CssClass	dragMe
	Height	20px
	Width	100%
Panel（pContents）	BackColor	#E0E0E0
	BorderColor	Black
	BorderStyle	Groove
	BorderWidth	1px
	Height	130px
	Width	100%
DragPanel（dpe）	DragHandleID	pHeader
DragPanel（dpe）	TargetControlID	pnl

Webフォーム（DragPanel.aspx）のプロパティ設定

　DragPanelコントロールのTargetControlIDプロパティは、ドラッグ機能を関連付けるPanelコントロールを指定するものだ。ここでは“pnl”を指定しているので、これによって、Panelコントロールpnlがドラッグ・パネルとして定義されたことになるわけだ。

　なお、DragPanelコントロールのそのほかのプロパティを設定する場合、（DragPanelコントロールではなく）関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Panelコントロールpnlのプロパティ・ウィンドウに（例えば）「dpe（DragPanelExtender）」という項目が追加されているので、この項目の配下から個々の値を設定することができる。

　もっとも、DragPanelコントロールで提供している固有のプロパティは、DragHandleIDプロパティだけだ。DragHandleIDプロパティは、パネルをマウスでドラッグする場合のハンドル部分を表すもので、通常はヘッダ部分を表すパネルを指定するのが一般的だ。

［参考］

上のサンプルでは、ヘッダ部のスタイルを適用するために、PanelコントロールpHeaderのCssClassプロパティに“dragMe”という名前のクラスを指定している。これはControl Toolkit内のサンプル・アプリケーションに含まれている.cssファイルで定義されているクラスだ。スタイルシートの引用については、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介しているので、併せて参照していただきたい。

　なお参考として、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではPanelコントロール配下のプロパティとして設定したDragHandleIDプロパティも、コード上はDragPanelコントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にToolkitScriptManagerの配置は必須--%>

<asp:ScriptManager ID="manager" runat="server">

  </asp:ScriptManager>

<%--ドラッグ・パネル全体を定義--%>

<div id="dbase" style="height:200px;width:200px">

  <asp:Panel ID="pnl" runat="server" Width="200px">

    <%--パネルのヘッダ部（ドラッグ・ハンドル部）を定義--%>

    <asp:Panel ID="pHeader" runat="server" Width="100%"

      BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"

      CssClass="dragMe" Height="20px">

        ASP.NET AJAXプログラミング</asp:Panel>

    <%--ドラッグ・パネル内の本体部分を定義--%>

    <asp:Panel ID="pContents" runat="server" Width="100%"

      BackColor="#E0E0E0" BorderColor="Black" BorderStyle="Groove"

      BorderWidth="1px" Height="130px">

      ASP.NET AJAX 1.0、ASP.NET AJAX Control Toolkit対応...

    </asp:Panel>

  </asp:Panel>

</div>

<%--DragPanelコントロールの諸設定--%>

<ajaxToolkit:DragPanelExtender ID="dpe" runat="server"

  DragHandleID="pHeader" TargetControlID="pnl">

  </ajaxToolkit:DragPanelExtender>

DragPanel.aspxのソース・コード（抜粋）

一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--～--%>は筆者によるコメント。

　以上を理解できたら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、ヘッダ部分をマウスでドラッグすることで、パネル位置を自由に移動できることが確認できるはずだ。

利用可能バージョン：.NET Framework 2.0のみ
カテゴリ：Webフォーム　処理対象：ASP.NET AJAX
使用ライブラリ：DragPanelコントロール
関連TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET AJAX］CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには？
		［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？
		［ASP.NET AJAX］DropShadowコントロールでパネルに影を付けるには？
		［ASP.NET AJAX］RoundedCornerコントロールでパネルの角を丸めるには？
		［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT