CodeZine(コードジン)

特集ページ一覧

Microsoft AJAX Libraryでドラッグ&ドロップ対応のWebページを作成する

Atlasによるドラップ&ドロップ可能なパネルの実装

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/01/26 00:00

AJAXは、Webページにかける魔法のフィルタのような威力を発揮します。Webページ上の画像やテキストといったパーツをドラッグ&ドロップできるようにすることも、AJAXの魔法の1つです。この記事では、Microsoft AJAX Library(Atlas)を使ってクライアント側でのドラッグ&ドロップを簡単に実現する方法を紹介します。

目次

はじめに

 ページの外観と操作性をユーザーが自分でパーソナライズできるようにする機能は、Webアプリケーションに追加できる便利な機能の1つです。ページのパーツの位置をユーザーが自分の好みで変更したいと思うこともよくあります。Webサイトを開いて、そのページのセクション、画像、テキスト、その他の「パーツ」を自分の好きなように移動できる状況を想像してみてください。AtlasなどのAJAXテクノロジーを使えば、これをすぐに実現できます。

 もちろん、ASP.NET 2.0では、WebPartsフレームワークを使って同じようなことができます。ただ、Atlasを使えば、WebPartsのような機能をもっと簡単にページに組み込むことができます。

 この記事では、Webページのパーツを「移動可能」にする方法を解説します。ユーザーはさまざまなパーツをドラッグ&ドロップ操作で配置し直せるようになります。その上、このようにしてパーソナライズしたページをASP.NET 2.0のプロファイルサービスでユーザーごとに保存できます。

アプリケーションの作成

 Visual Studio 2005を使用して新しいAtlasアプリケーションを作成し、「C:\DragandDrop」と名前を付けます。「default.aspx」ページの分離コードに切り替えます。

 まず、<atlas:ScriptManager>コントロールのEnablePartialRendering属性をtrueに設定します。これによって、ページの部分更新が可能になります。

<atlas:ScriptManager ID="ScriptManager1" runat="server"
    EnablePartialRendering="true" />

 次に、このページに<atlas:UpdatePanel>コントロールを追加し、このコントロール内に<ContentTemplate>要素を追加します。この<ContentTemplate>要素にPanelコントロールを追加し、その境界線スタイルと大きさを設定します。これを行うには次のようにコードを追加します。

<atlas:ScriptManager ID="ScriptManager1" runat="server"
   EnablePartialRendering="true" />
   <div>
    <atlas:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Panel ID="Panel1" runat="server"
               BorderStyle="Solid"
               Height="198px"
               Width="194px">
            </asp:Panel>
        </ContentTemplate>
    </atlas:UpdatePanel>

 これで<atlas:UpdatePanel>コントロールにPanelコントロールが埋め込まれたので、ここにコンテンツを追加します。テキストを追加することも、CalendarやImageMapなど別のコントロールを追加することもできます。この例では時計を追加して、選択したタイムゾーンの時刻を表示させることにします。ClockLink.comに、Webページに簡単に埋め込むことのできる洗練された時計が揃っています。これらの時計は、ページを再ロードしなくても、このページのクライアント側で(毎秒)自動的に更新されます。ニュージーランドの時刻を表示する時計を追加することにします。以下のコードのようにスクリプトを挿入するだけでこの時計を埋め込むことができます。

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Panel ID="Panel1" runat="server"
           BorderStyle="Solid"
           Height="198px"
           Width="194px">

            <script rc="http://www.clocklink.com/embed.js">
            </script>

            <strong>Current Time in New Zealand</strong>

            <script type="text/javascript"
              language="JavaScript">
              obj = new Object;
              obj.clockfile = "0010-Red.swf";
              obj.TimeZone = "NZT";
              obj.width = 200;
              obj.height = 200;
              obj.wmode = "transparent";
              showClock(obj);
            </script>

        </asp:Panel>
    </ContentTemplate>
</atlas:UpdatePanel>

 この時点で[F5]キーを押すと、このページがどのように表示されるか確認できます。図1は、Panelコントロール内に時計が表示されている状態です。

図1 「Default.aspx」ページにクライアント側で毎秒更新される時計を表示した様子
図1 「Default.aspx」ページにクライアント側で毎秒更新される時計を表示した様子

 アプリケーションの実行を終了します。次に、この時計が埋め込まれているPanelコントロールを移動可能にします。そのためには<atlas:DragOverlayExtender>コントロールを使います。<atlas:DragOverlayExtender>コントロールを、別のコントロールを拡張してフローティングコントロールに変えます。フローティング状態になったコントロールはWebページの好きな場所にドラッグ&ドロップできるようになります。

 <atlas:DragOverlayExtender>コントロールを追加し、これに<atlas:DragOverlayProperties>コントロールを追加して、そのTargetControlID属性を「Panel1」に設定します。また、これのEnabledプロパティも忘れずにtrueに設定します。

<atlas:ScriptManager ID="ScriptManager1" runat="server"
                     EnablePartialRendering="true" />
<atlas:DragOverlayExtender ID="DragOverlayExtender1"
                           runat="server">
    <atlas:DragOverlayProperties TargetControlID="Panel1"
                                 Enabled="true"/>
</atlas:DragOverlayExtender>

 [F5]キーを押してこのアプリケーションをテストします。ページの好きな場所に時計をドラッグできるようになりました。ただし、マウスを離すと時計は必ず元の場所に戻ってしまいます。これは、ページのレンダリング領域外にはコントロールをドロップできず、今の状態ではこのページにはPanelコントロール以外何もないためです。このページの<body>要素に、以下のように属性を追加すると、この問題を解決できます。

<body style="height: 100%;">

 [F5]キーを押してこのアプリケーションをもう一度テストします。今度は、時計をドラッグしてページ全体のPanelコントロール内の好きな場所にドロップできるようになっています(図2を参照)。

図2 同じ時計をページ内の別の場所にドラッグ&ドロップした結果
図2 同じ時計をページ内の別の場所にドラッグ&ドロップした結果

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

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

  • Wei-Meng Lee(Wei-Meng Lee)

    Microsoft MVP受賞者。Microsoft社の最新テクノロジー実地研修を専門とするDeveloper Learning Solutions社を創設。.NETとワイヤレステクノロジーの開発者、指導者として知られる。国際的なカンファレンスでたびたび講演し、.NET、XML、ワイヤレステクノロジ...

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

あなたにオススメ

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