ドラッグ アンド ドロップ フレームワーク によってドラッグ アンド ドロップ機能をアプリケーションに簡単に追加できます。これによって要素のリアルタイムの移動とよりユーザー フレンドリーな操作が可能になります。フレームワークはドラッグ アンド ドロップ プロセスを処理するだけでなくカスタムなアニメーションを作成するために必要なスクリプトを提供します。
ドラッグ アンド ドロップ フレームワークを利用するにはソース要素とターゲット要素を設定することが必要となります。ソース要素をターゲット要素にドラッグ アンド ドロップできます。場合によっては、これはアプリケーションにドラッグ アンド ドロップを実装するのと同じくらいシンプルです。
必要なファイル
ドラッグ アンド ドロップ フレームワークは、Infragistics4.Web.v23.1 アセンブリ内の以下の Javascript ファイルで構成されます:
igDragDrop.js
5_igObjects.js
igAnimations.js
ドラッグ アンド ドロップ機能を実装する時にアプリケーションにこれらのファイルを含める必要があります。
ドラッグ アンド ドロップの要件
ソース要素の場合:
MouseDown
MouseMove
ターゲット要素の場合:
MouseUp
MouseMove
ドキュメントの MouseUp イベントもリッスンされます。
ドラッグ アンド ドロップ アクション
ターゲットにドロップされた時に要素が動作できる方法は 2 つあります。
Append - 各要素はターゲット内で要素のリストの最後に配置されます。
Insert - 各要素は要素のリストの先頭に配置されます。
ドラッグ アンド ドロップ モード
ドラッグ アンド ドロップ操作の最終結果を決定するモードは 4 つあります。
None - ドラッグ アンド ドロップの効果は開発者に一任されます。
Copy - オリジナルの要素のクローンが作成されてターゲット要素内に配置されます。
Move - オリジナルの要素のクローンがターゲット要素内に配置され、オリジナルの要素は削除されます。
Default - デフォルトのドラッグ アンド ドロップは移動です。ユーザーは Ctrl キーを押しながらドラッグすると、コピーの操作結果を生成できます。
キー クラス
ドラッグ アンド ドロップ操作で実行されるほとんどの作業を制御する Drag and Drop Framework には 2 つのクラスがあります。
Infragistics.Web.UI.DragDropManager - ページでドラッグ アンド ドロップ操作に関する情報を管理および提供する静的クラス。このオブジェクトにいつでもアクセスでき、ドラッグ アンド ドロップ操作が発生している場合などの情報や発生している場合にはその操作についての情報を含んでいます。ドラッグ アンド ドロップ操作のソースおよびターゲット情報も提供します。
Infragistics.Web.UI.DragDropBehavior - ソース要素とターゲット要素となるべき要素/UIObjects を開発者が指定することを可能にするオブジェクト。このオブジェクトはドラッグ操作のすべての側面を処理して、開発者がこの操作に対応することを可能にするイベントを提供します。オブジェクトはドロップ アクションおよびモード、カーソル、ならびにドラッグされる項目を表すマークアップなどドラッグ アンド ドロップの動作に関係するその他の設定も制御します。