メインコンテンツへジャンプ
ASP.NETのTips満載!

チュートリアル

文責:山田奈美最終更新日:2007年09月14日

DragPanelコントロール(AJAX Control Toolkit)

キャラクターイラスト

DragPanelコントロールを使うと、ユーザが自分でパネルの位置を移動することができるよ。

ただ、静的な画面を見るだけじゃなくて、好きなようにレイアウトを変更できるのが魅力だね。

DragPanelコントロールとは?

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>

実行結果は冒頭の図のとおり。「ここをドラッグしてみてね」の部分にマウスを合わせてドラッグするとパネルが移動します。

コンテンツの終わりです。