Ziehen und übergeben

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 Funktion nodeCreator 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 Funktion nodeCreator 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 von dojo.dnd.manager verwaltet wird.
  • point ist die Position des Übergabepunkts in den Graphenkoordinaten.
  • diagram ist das aktuelle Diagramm.
  • elements ist das Array von graphElements hinter dem Übergabepunkt. Es wird die Z-Sortierung angewendet (das erste Element ist das Element im Vordergrund).
  • undoAction ist die DropAction, 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.