Glisser-déposer

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 fonction nodeCreator. 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 fonction nodeCreator 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 par dojo.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éments graphElements 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'action DropAction 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.