バージョン

ドラッグ アンド ドロップで開始

始める前に

ドラッグ アンド ドロップ フレームワーク を使用して、ある場所から別の場所に要素を移動するなど、基本的なドラッグアンドドラッグ機能を追加することは非常にシンプルです。要素でドラッグアンドドロップを有効にするプロセスは、ソース要素、ターゲット要素、ドロップモードおよびアクションの設定という主要なステップを伴います。ソース要素をターゲット要素にドラッグ アンド ドロップすることが許可されます。ドラッグ アンド ドロップモードはドラッグアンド ドロップの結果を決定します。

達成すること

画像でドラッグ アンド ドロップを有効にする方法を学習します。これによりエンドユーザーは画像を Div にドラッグ アンド ドロップすることが可能となります。

次の手順を実行します

  1. AJAX 対応の ASP.NET Web サイトを作成します。

  2. Infragistics4.Web.v21.2 アセンブリを参照します。

  3. 必要なスクリプト参照をページに追加します。

HTML の場合:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Infragistics4.Web.v21.2, Version=21.2.20212.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Name="Infragistics.Web.UI.SharedScripts.igDragDrop.js" />
        <asp:ScriptReference Assembly="Infragistics4.Web.v21.2, Version=21.2.20212.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Name="Infragistics.Web.UI.Scripts.5_igObjects.js" />
        <asp:ScriptReference Assembly="Infragistics4.Web.v21.2, Version=21.2.20212.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Name="Infragistics.Web.UI.SharedScripts.igAnimation.js" />
    </Scripts>
</asp:ScriptManager>

注: 製品によって上記のコードでバージョン番号を修正します。

  1. 画像のレイアウトのための以下のマークアップと Div を追加します。

HTML の場合:

<div id="imageList" style="height: 70px; width: 600px; top: 65px; position: relative; text-align: center;">
    <img src="Pictures/8ball.bmp" id="8-ball" />
    <img src="Pictures/bell.bmp" id="Bell" />
    <img src="Pictures/CD.bmp" id="CD" />
</div>
<div id="cartAreaDIV" style="position: relative; left: 17px; top: 65px; width: 600px; border: solid 1px black;
    height: 125px;">
</div>
  1. ScriptManager コンポーネントの下のページの任意の場所にスクリプト ブロックを追加します。

HTML の場合:

<script type="text/javascript">
// TODO:  ドラッグ アンド ドロップを処理するためのコードを追加します。
</script>
  1. ドラッグ アンド ドロップ機能を実装するためにスクリプト ブロックに Javascript を追加します。

    1. アプリケーションのロード イベントを処理します。

JavaScript の場合:

Sys.Application.add_load(appLoaded);
function appLoaded() {
    //TODO: ドラッグ アンド ドロップ機能を設定するためのコードを追加します。
}
  1. ドラッグ アンド ドロップの設定を実装するためにドラッグ アンド ドロップ動作を作成します。

JavaScript の場合:

var ddb = new $IG.DragDropBehavior();
  1. ドロップ モードを Copy に、ドロップ アクションを Append に設定します。

JavaScript の場合:

ddb.set_defaultDropAction($IG.DragDropAction.Append);
ddb.set_dragDropMode($IG.DragDropEffects.Copy);
  1. Div コンテナ内で画像を列挙することによってドラッグ アンド ドロップのソースとして画像を設定します。

JavaScript の場合:

var list = $get("imageList");
var count = list.childNodes.length;
var child;
for (var i = 0; i < count; i++) {
    child = list.childNodes[i];
    // ドラッグ アンド ドロップのソースとして各 IMG を設定します
    if (child.getAttribute)
        ddb.addSourceElement(child);
    }
  1. ターゲット要素を設定します。

JavaScript の場合:

// ターゲット要素を Div として設定します
ddb.addTargetElement($get("cartAreaDIV"), true);
  1. アプリケーションを実行します。画像を Div 領域にドラッグ アンド ドロップできます。画像のコピーが作成されて Div 内に配置されます。

DragandDropFramework Getting Started with Drag and Drop 01.png