チュートリアル
文責：山田奈美最終更新日：2007年09月14日
DragPanelコントロール（AJAX Control Toolkit）
|
 |
|
DragPanelコントロールを使うと、ユーザが自分でパネルの位置を移動することができるよ。
ただ、静的な画面を見るだけじゃなくて、好きなようにレイアウトを変更できるのが魅力だね。
|
|
|
DragPanelコントロールとは？
DragPanelコントロールでは、その名のとおりドラッグによって、ユーザが自分でパネルの位置を移動することができます。
以下は、DragPanelコントロールを使ったサンプルの実行結果です。
DragPanelサンプル実行結果（移動前）
DragPanelサンプル実行結果（移動後）
DragPanelコントロールの使い方は、とっても簡単。VisualStudio（VisualWebDeveloper）のデザイン画面にDragPanelコントロールを配置して、以下表を参考にプロパティを入力するだけでOKです。プロパティ値がプロパティウィンドウから入力できない場合は、ソース画面から直接入力してください。
DragPanelコントロールのプロパティ
DragPanelコントロールのプロパティは、以下の表のとおりです。
DragPanelコントロールのプロパティ
| プロパティ名 | 概要 |
| TargetControlID | 機能を適用するパネルコントロールID |
| DragHandleID | ドラッグの際、ハンドルとなるコントロールのID |
DragPanelコントロールのサンプル
ここではTargetControlIDプロパティにPanel1を、DragHandleIDプロパティにPanel2をそれぞれ設定しました。
［DragPanel.aspx］
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<strong><span style="color: red">ようこそWebDeliへ！<br />
</span><span style="color: green">あなたのサイトにもう一品。簡単便利でおいしいツール。</span></strong>
</div>
<asp:Panel ID="Panel1" runat="server" Height="78px" Width="236px" BorderWidth="1px">
<asp:Panel ID="Panel2" runat="server" Height="16px" Width="234px" BorderWidth="1px" BackColor="#FFC080">
<strong>ここをドラッグしてみてね</strong></asp:Panel>
<asp:Image ID="Image1" runat="server" ImageUrl="~/image/linkbanner_l.gif" BorderWidth="1px" />
</asp:Panel>
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1" DragHandleID="Panel2" >
</cc1:DragPanelExtender>
</form>
実行結果は冒頭の図のとおり。「ここをドラッグしてみてね」の部分にマウスを合わせてドラッグするとパネルが移動します。
