DragPanelExtenderコントロールを使ったドラッグ＆ドロップ
Webページのドラッグ＆ドロップ操作には、<atlas:DragOverlayExtender>コントロールを使う方法以外に、Atlas Control Toolkitに付属のDragPanelExtenderコントロールを使う方法もあります。DragPanelExtenderコントロールは基本的には<atlas:DragOverlayExtender>コントロールとよく似ていますが、ドラッグされたコントロールの位置情報を保持する機能が組み込まれていない点が異なります。
DragPanelExtenderコントロールの動作を見るために、ページ（Default2.aspx）に新しいWebフォームを追加します。このフォームの分離コードに切り替え、以下のコードを記述します。
<atlas:ScriptManager ID="ScriptManager1" runat="server"> </atlas:ScriptManager> <asp:Panel ID="Panel1" runat="server" Width="125px" BorderStyle="Double"> <asp:Panel ID="Panel2" runat="server" Height="1px" Width="100%" BorderStyle="Double" BackColor="White"> <div style="text-align: center">Drag Me</div> </asp:Panel> <center> <asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px"> <asp:Image ID="Image1" runat="server" Height="318px" Width="475px" ImageUrl="~/Fish.jpg" /> </asp:Panel> </center> </asp:Panel>
このコードには以下のものが含まれます。
<atlas:ScriptManager>コントロール- 1つのPanelコントロール（Panel1）内に埋め込まれた2つのPanelコントロール（Panel2とPanel3）
- Panel2内の
<div>要素（文字列「Drag Me」が含まれる） - Panel3内の画像「Fish.jpg」（この画像をプロジェクトに追加することが必要）
DragPanelExtenderコントロールでは、ドラッグできるようにするPanelコントロール（この場合はPanel2）と、これに対応して移動できるようにするPanelコントロール（この場合はPanel1）を指定できます。以下のコードをページに追加してこれを指定します。
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server"> <cc1:DragPanelProperties DragHandleID="Panel2" TargetControlID="Panel1" /> </cc1:DragPanelExtender>
これによって、ユーザーはPanel2をドラッグできるようになり、対応するPanel1がこれと一緒に移動するようになります。これで完了です。［F5］キーを押してこのアプリケーションをテストします。文字列「Drag Me」が含まれているパネルをドラッグすると、画像が含まれているパネルも移動します（図6を参照）。
ドラッグアイコンへの変更
よく見ると、「Drag Me」パネルにマウスを置いてもマウスカーソルが移動ハンドル（4方向矢印のアイコン）に変わらないことに気付くでしょう。これではパネルが移動可能であることがユーザーに伝わらず、UIデザインとして望ましくありません。マウスカーソルを変更するには、カスケードスタイルシート（CSS）を追加する必要があります。
CSSスタイルシートをプロジェクトに追加します（ソリューションエクスプローラでプロジェクト名を右クリックしてから［Add New Item］をクリックし、［Style Sheet］をクリックします）。既定の名前「StyleSheet.css」を使用します。このスタイルシートに以下の設定を追加します。
.dragIcon {
width:100%;
height:21px;
background-color:#FFF;
text-align:center;
cursor:move;
font-weight:bold;
}
「Default2.aspx」のソースビューに戻り、新しく追加したスタイルシートにリンクさせるために、以下のように要素を追加します。
<head runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head>
「Drag Me」パネルの上にマウスが移動したときにこれを示すために、<div>要素のクラス属性を次のように設定します。
<asp:Panel ID="Panel2" runat="server" Height="1px" Width="100%" BorderStyle="Double" BackColor="White"> <div class="dragIcon" style="text-align: center"> Drag Me</div> </asp:Panel>
［F5］キーを押してこのアプリケーションをもう一度テストします。マウスを「Drag Me」パネルの上に移動すると、マウスカーソルは移動ハンドルに変わります（図7を参照）。
この記事では、Atlasを使ってWebページにドラッグ＆ドロップ機能を簡単に実装する方法を解説しました。<atlas:DragOverlayExtender>コントロールを使うと、Panelコントロールを拡張できるほか、他のWebサーバーコントロールも拡張できます。また、Atlas Control Toolkitに付属のDragPanelExtenderコントロールを使ってPanelコントロールを移動可能にする方法も紹介しました。最後に、コントロールの既定のマウスカーソルを移動ハンドルに変更して、コントロールが移動可能であることを視覚的に示す方法も説明しました。
