La fonctionnalité glisser-déposer vous permet d'exécuter une action tout en faisant glisser des composants externes dans le diagramme.
Cette fonctionnalité est liable par le biais du widget Diagram, et l'action est personnalisable.
Elle est couramment utilisée pour créer un graphe en faisant glisser des éléments à partir d'une palette.
Composant DropSource
DropSource
est un petit composant qui peut être déplacé à l'intérieur d'un graphe pour exécuter une action spécifique dans le diagramme. Il s'agit d'un composant Dojo standard (dojo.dnd.Source
)
que vous pouvez configurer en faisant glisser des éléments personnalisés vers le diagramme.
Lorsque vous faites glisser le composant, un avatar s'affiche derrière le curseur de souris pour indiquer qu'une action de glisser-déposer est en cours. Par exemple :
var dndObj = new dojo.dnd.Source(node, {singular: true, copyOnly: true, creator: nodeCreator});
La fonction
nodeCreator
reçoit l'élément et renvoie ce qui suit :return {node: node, data: item, type: type}
où :
node
: représentation DOM (Document Object Model) de l'élément de données créé par la fonctionnodeCreator
. Ce noeud doit avoir un ID unique. Si aucun ID n'est affecté, il est généré et affecté ultérieurement par le conteneur.data
: élément de données proprement dit. La fonctionnodeCreator
peut le modifier ou le remplacer.type
: tableau de chaînes qui identifient le type de l'élément. Utilisé lors d'une opération de glisser-déposer pour sélectionner des cibles compatibles.
Composant DropInteractor
DropInteractor gère l'action Déposer dans le diagramme. Lorsqu'il est activé, l'attribut
DropInteractor
permet de détecter l'action Déposer dans le diagramme, d'identifier le point du diagramme où cette action a eu lieu et de rechercher les éléments de graphe situés derrière le point où des éléments sont déposés. Lorsque la dépose à lieu, onDropFunction
est appelé. La fonction liée a le format suivant :function(droppedItem,point,diagram,elements,undoAction)
Les arguments de la fonction sont les suivants :
droppedItem
est l'élément déposé, géré directement pardojo.dnd.manager
.point
est la position du point de dépose dans les coordonnée du graphe.diagram
est le diagramme en cours.elements
est le tableau d'élémentsgraphElements
trouvé derrière le point de dépose. Il utilise l'ordre-z (le premier élément est celui situé à l'avant-plan).undoAction
est l'actionDropAction
appliquée lors de l'annulation ou du rétablissement de cette action. Vous pouvez définir des actions personnalisées pour l'annulation et le rétablissement, et ajouter les autres données requises pour cette action.
Lors de l'action de dépose, l'une des procédures les plus courantes consiste à créer de nouveaux éléments dans le graphe.
DropInteractor
fournit la fonction onDropTemplateFunction
pour créer les éléments en fonction d'un modèle basé sur l'élément déposé. Cette fonction détermine le modèle à utiliser lorsque les nouveaux éléments de graphe sont créés lors de l'action de dépose. Elle est généralement appelée par l'éditeur de diagramme sur la fonction resolveNodeTemplate
et elle a le format suivant : function onDropTemplate(droppedItem,dataItem,diagram)
Ces fonctions peuvent être définies directement par le biais de balises :
onDropFunction="onDrop" onDropTemplateFunction="onDropTemplate"
Composant DropAction
Le composant DropAction contient toutes les fonctionnalités permettant d'annuler et de rétablir l'action de dépose. Vous pouvez personnaliser cette action en ajoutant des fonctions utilisateur qui sont généralement appelées à partir de la fonction
onDropFunction
.
Les méthodes suivantes sont disponibles :setDroppedItem
: définit l'élément déposé.getDroppedItem
: extrait l'élément déposé.setDroppedPosition
: définit les coordonnées de la position de dépose dans le graphe.getDroppedPosition
: extrait les coordonnées de la position de dépose dans le graphe.setElementsList
: définit la liste d'éléments contenant les éléments de graphe correspondant à la position de dépose.getElementsList
: extrait la liste d'éléments contenant les éléments de graphe correspondant à la position de dépose.setDropInteractor
: définit l'interacteur de dépose.getDropInteractor
: extrait l'interacteur de dépose.