Die Drag-and-drop-Funktionalität ermöglicht Ihnen, eine beliebige Aktion auszuführen, während Sie externe
Komponenten in das Diagramm ziehen.
Diese Funktionalität kann über das Diagram-Widget gebunden werden, und die Aktion ist anpassbar.
Sie wird häufig verwendet, um einen Graphen durch Ziehen von Elementen aus einer Palette zu erstellen.
Komponente "DropSource"
DropSource
ist eine kleine Komponente, die in einen Graphen gezogen werden
kann, um eine bestimmte Aktion im Diagramm auszuführen.
Es handelt sich hierbei um eine Dojo-Standardkomponente (dojo.dnd.Source
), die Sie konfigurieren können, indem Sie angepasste Elemente
in das Diagramm ziehen.
Während des Ziehens der Komponente erscheint ein Avatar hinter dem Mauscursor, um anzuzeigen, dass eine
Drag-and-drop-Aktion stattfindet.
Beispiel:
var dndObj = new dojo.dnd.Source(node, {singular: true, copyOnly: true, creator: nodeCreator});
Die Funktion
nodeCreator
empfängt das Element und gibt Folgendes zurück:
return {node: node, data: item, type: type}
Erläuterungen:
node
: Eine DOM-Darstellung des von der FunktionnodeCreator
erstellten Datenelements. Dieser Knoten muss eine eindeutige ID haben. Wenn keine ID zugeordnet ist, wird sie generiert und später vom Container zugeordnet.data
: Das Datenelement selbst. Die FunktionnodeCreator
kann das Datenelement ändern oder ersetzen.type
: Ein Array von Zeichenfolgen, die den Typ des Elements angeben. Es wird während der Drag-and-drop-Operation verwendet, um kompatible Ziele auszuwählen.
Komponente "DropInteractor"
DropInteractor bearbeitet die Übergabeaktion im Diagramm. Wenn die
DropInteractor
aktiviert ist, erkennt sie die Übergabeaktion im Diagramm,
identifiziert den Diagrammpunkt, an dem die Übergabeaktion stattgefunden hat, und sucht alle Graphenelemente, die sich hinter dem
Übergabepunkt befinden.
Bei der Übergabe wird onDropFunction
aufgerufen.
Die gebundene Funktion hat das folgende Format:function(droppedItem,point,diagram,elements,undoAction)
Die Funktionsargumente sind wie folgt:
droppedItem
ist das übergebene Element, das direkt vondojo.dnd.manager
verwaltet wird.point
ist die Position des Übergabepunkts in den Graphenkoordinaten.diagram
ist das aktuelle Diagramm.elements
ist das Array vongraphElements
hinter dem Übergabepunkt. Es wird die Z-Sortierung angewendet (das erste Element ist das Element im Vordergrund).undoAction
ist dieDropAction
, die angewendet wird, wenn diese Aktion rückgängig gemacht oder wiederholt wird. Sie können angepasste Aktionen für "undo" und "redo" festlegen und weitere beliebige Daten hinzufügen, die für diese Aktion erforderlich sind.
Während der Übergabeaktion ist eine der gängigsten Prozeduren das Erstellen neuer Elemente im Graphen.
DropInteractor
stellt die Funktion
onDropTemplateFunction
bereit, mit der die neuen Elemente entsprechend einer Schablone, die auf
dem übergebenen Element basiert, erstellt werden können.
Diese Funktion bestimmt, welche Schablone zu verwenden ist, wenn neue Graphenelemente während der Übergabeaktion erstellt werden.
Sie wird gewöhnlich vom Diagrammeditor in der Funktion resolveNodeTemplate
aufgerufen und hat das folgende Format:
function onDropTemplate(droppedItem,dataItem,diagram)
Diese Funktionen können direkt über Markups definiert werden:
onDropFunction="onDrop" onDropTemplateFunction="onDropTemplate"
Komponente "DropAction"
Die Komponente DropAction enthält alle Funktionen für das Rückgängigmachen und Wiederholen der Übergabeaktion.
Sie können diese Aktion anpassen, indem Sie Benutzerfunktionen hinzufügen, die Sie gewöhnlich in
onDropFunction
aufrufen.
Die folgenden Methoden sind verfügbar:setDroppedItem
: Legt das übergebene Element fest.getDroppedItem
: Ruft das übergebene Element ab.setDroppedPosition
: Legt die Graphenkoordinaten für die Übergabeposition fest.getDroppedPosition
: Ruft die Graphenkoordinaten für die Übergabeposition ab.setElementsList
: Legt die Elementliste fest, die die Graphenelemente enthält, die der Übergabeposition entsprechen.getElementsList
: Ruft die Elementliste ab, die die Graphenelemente enthält, die der Übergabeposition entsprechen.setDropInteractor
: Legt den Übergabeinteraktor fest.getDropInteractor
: Ruft den Übergabeinteraktor ab.