ドラッグ・アンド・ドロップ機能を使用すると、ダイアグラム内部で外部コンポーネントをドラッグしている間に任意のアクションを実行できます。この機能は、Diagram ウィジェットによりバインドでき、アクションはカスタマイズ可能です。
この機能は、パレットから要素をドラッグしてグラフを作成するために一般的に使用されます。
DropSource コンポーネント
DropSource
は、グラフ内部でドラッグ可能な小さいコンポーネントで、ダイアグラム内で特定のアクションを実行します。これは、標準 Dojo コンポーネント (dojo.dnd.Source
) で、ダイアグラム内にカスタム要素をドラッグすることにより構成することができます。このコンポーネントをドラッグしている間、マウス・カーソルの後ろにアバターが表示され、ドラッグ・アンド・ドロップ・アクションが行われていることが示されます。例:
var dndObj = new dojo.dnd.Source(node, {singular: true, copyOnly: true, creator: nodeCreator});
nodeCreator
関数が項目を受け取り、以下を返します。return {node: node, data: item, type: type}
ここで、
node
は、nodeCreator
関数によって作成されたデータ項目の DOM 表現です。 このノードには、固有 ID がなければなりません。ID が割り当てられない場合、後からコンテナーによって生成、割り当てられます。data
は、データ項目自体です。nodeCreator
関数によって、変更または置換が可能です。type
は、項目のタイプを識別するストリング配列です。 これは、ドラッグ・アンド・ドロップ操作時に互換性のあるターゲットを選択する場合に使用されます。
DropInteractor コンポーネント
DropInteractor は、ダイアグラム内のドロップ・アクションを処理します。
DropInteractor
がアクティブになると、ダイアグラム・ドロップ・アクションを検出して、ドロップ・アクションが行われたダイアグラム・ポイントを識別し、ドロップ・ポイントの後ろにあるグラフ要素を検出します。ドロップが行われると、onDropFunction
が呼び出されます。このバインドされた関数は、以下のような形式になっています。function(droppedItem,point,diagram,elements,undoAction)
関数の引数は、以下のとおりです。
droppedItem
は、ドロップされた項目で、dojo.dnd.manager
によって直接管理されます。point
は、グラフの座標内のドロップ・ポイントの位置です。diagram
は、現在のダイアグラムです。elements
は、ドロップ・ポイントの後ろにあるgraphElements
の配列です。Z 順序 (最初の要素は前景にある要素) が使用されます。undoAction
は、このアクションを元に戻す、または再実行する場合に適用されるDropAction
です。元に戻すおよび再実行についてはカスタマイズしたアクションを設定することができ、このアクションに必要な他のデータを追加できます。
ドロップ・アクション時の最も一般的な手順の 1 つは、グラフ内に新規の要素を作成することです。
DropInteractor
には、ドロップされた項目に基づいてテンプレートに従って新規要素を作成する関数 onDropTemplateFunction
があります。
この関数により、ドロップ・アクション時に新規のグラフが作成される場合に使用されるテンプレートが決定されます。この関数は、通常、resolveNodeTemplate
関数に対してダイアグラム・エディターによって呼び出され、次のような形式になっています。function onDropTemplate(droppedItem,dataItem,diagram)
これらの関数は、マークアップによって直接設定できます。
onDropFunction="onDrop" onDropTemplateFunction="onDropTemplate"
DropAction コンポーネント
DropAction コンポーネントには、ドロップ・アクションを元に戻すおよび再実行するあらゆる機能が組み込まれています。
このアクションは、通常、
onDropFunction
関数から呼び出すユーザー関数を追加することにより、カスタマイズすることができます。
以下のメソッドが使用可能です。setDroppedItem
: ドロップされた項目を設定します。getDroppedItem
: ドロップされた項目を取得します。setDroppedPosition
: ドロップ位置のグラフ座標を設定します。getDroppedPosition
: ドロップ位置のグラフ座標を取得します。setElementsList
: ドロップ位置に一致するグラフ要素を含む要素リストを設定します。getElementsList
: ドロップ位置に一致するグラフ要素を含む要素リストを取得します。setDropInteractor
: ドロップ・インタラクターを設定します。getDropInteractor
: ドロップ・インタラクターを取得します。