ドラッグ アンド ドロップの有効化 (igTree)

トピックの概要

目的

ここでは、コード例とともに、igTree™ コントロールでドラッグ アンド ドロップ機能を有効にする方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
• ドラッグ アンド ドロップ機能を有効にする (概要)
• igTree コントロール内でドラッグ アンド ドロップ機能を有効にする
  • 概要
  • プロパティ設定
  • コード例
• igTree コントロール内でドラッグ アンド ドロップ機能を有効にする
  • 概要
  • プロパティ設定
  • コード例
• 関連コンテンツ

概要

ドラッグ アンド ドロップ機能

ドラッグ アンド ドロップは同じ igTree コントロール内だけでなく、異なる igTree コントロール間でも実行できます。2 つの igTree コントロール間で動作するよう設定できます。

ドラッグ アンド ドロップ機能を有効にする (概要)

ドラッグ アンド ドロップ操作を有効にする (概要チャート)

以下の表では、igTree コントロールのドラッグ アンド ドロップ機能を有効にする 2 とおりの方法をまとめました。

igTree コントロール内でドラッグ アンド ドロップ機能を有効にする

概要

igTree コントロールのドラッグ アンド ドロップ機能を有効にしておきます。

1 つのコントロール内のドラッグの有効化は dragAndDrop プロパティで管理します。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

コード例

以下のコード例は、コードに実装したのサンプルです。

JavaScript の場合:

$("#tree").igTree({                                                           
 dragAndDrop: true,                                                 
});

Razor の場合:

@(Html.
       Infragistics().
    Tree().
    ID("tree").
    DragAndDrop(true).
    DataBind().
    Render()                                                              
)

igTree コントロール内でドラッグ アンド ドロップ機能を有効にする

概要

関係するすべての igTree コントロールでドラッグ アンド ドロップ機能を有効にしておきます。 また、各 igTree コントロールは、他のコントロールのドロップを受け付ける構成にしておきます。

この場合、関係する igTree コントロールの dragAndDrop プロパティをそれぞれ true に設定して、ドラッグを有効にしておきます。これらの igTree コントロール間でドロップを有効にするには、他のツリーからドロップを受け取る igTree ごとに以下のように 2 つのプロパティをさらに設定しておきます。

• dragAndDropSettings を allowDrop に設定します。
• allowDrop プロパティを true に設定します。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

コード例

以下のコード例は、コードで実装したサンプル ブロックの設定です。

JavaScript の場合:

$("#firstTree").igTree({                                                      
    dragAndDrop: true,
    dragAndDropSettings: {                                                       
        allowDrop: true                                                      
    }                                                                     
}); 


$("#secondTree").igTree({                                                     
    dragAndDrop: true,
    dragAndDropSettings: {                                                      
        allowDrop: true                                                       
    }                                                                   
});

Razor の場合:

@(Html.Infragistics()
    .Tree()
    .ID("firstTree")
    .DragAndDrop(true)
    .DragAndDropSettings(settings =>{
        settings.AllowDrop(true);
    })
    .DataBind()
    .Render())  

@(Html.Infragistics()
    .Tree()
    .ID("secondTree")
    .DragAndDrop(true)
    .DragAndDropSettings(settings =>{
        settings.AllowDrop(true);
    })
    .DataBind()
    .Render())

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• ドラッグ アンド ドロップの構成 (igTree): ここでは、コード例とともに、 Javascript と MVC の両方で igTree コントロールのドラッグ アンド ドロップを構成する方法を紹介します。

• ドラッグ アンド ドロップ API リファレンス (igTree): このグループのトピックは、igTree コントロールのドラッグ アンド ドロップ機能に関連するイベントとプロパティについての参照情報を提供します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• ドラッグ アンド ドロップ - 単一のツリー: このサンプルでは、igTree コントロールのドラッグ アンド ドロップ機能を有効にして初期化する方法を紹介します。

• ドラッグ アンド ドロップ - 複数のツリー: このサンプルでは、2 つの igTree の間にノードをドラッグ アンド ドロップする方法を紹介します。

• API およびイベント: このサンプルは igTree API を使用する方法を紹介します。