Operaciones de arrastrar y soltar

La funcionalidad de arrastrar y soltar le permite llevar a cabo cualquier acción mientras arrastra componentes externos dentro del diagrama. Esta funcionalidad es enlazable mediante el widget Diagram y la acción es personalizable. Se suele utilizar para crear un gráfico arrastrando elementos desde una paleta.

El componente DropSource

DropSource es un pequeño componente que puede arrastrarse al interior de un gráfico para llevar a cabo una acción específica en el diagrama. Es un componente estándar de Dojo (dojo.dnd.Source) que puede configurarse arrastrando elementos personalizados en el diagrama. Mientras arrastra el componente, se muestra un avatar detrás del cursor del ratón, para indicar que se está llevando a cabo la acción de arrastrar y soltar.
Por ejemplo:
var dndObj = new dojo.dnd.Source(node, {singular: true, copyOnly: true, creator: nodeCreator});
La función nodeCreator recibe el elemento y devuelve:
return {node: node, data: item, type: type}
donde:
  • node: una representación DOM del elemento de datos creado mediante la función nodeCreator. Este nodo debe tener un ID exclusivo. Si no se asigna ningún ID, el contenedor lo generará y lo asignará posteriormente.
  • data: el elemento de datos. La función nodeCreator puede modificarlo o sustituirlo.
  • type: una matriz de series, que identifica el tipo del elemento. Se utiliza durante la operación de arrastrar y soltar para seleccionar destinos compatibles.

El componente DropInteractor

DropInteractor maneja la acción de soltar en el diagrama. Cuando se activa, el componente DropInteractor detecta la acción de soltar en el diagrama, identifica el punto del diagrama donde se ha producido la acción de soltar y busca los elementos del gráfico que se encuentren detrás del punto de soltar. Cuando se produce la acción de soltar, se llama a onDropFunction. La función de enlazado tiene el formato siguiente:
function(droppedItem,point,diagram,elements,undoAction)
Los argumentos de la función son los siguientes:
  • droppedItem es el elemento soltado, gestionado directamente por dojo.dnd.manager.
  • point del punto en que se ha soltado el elemento en las coordenadas del gráfico.
  • diagram es el diagrama actual.
  • elements es la matriz de graphElements que se encuentra detrás del punto de soltar. Utiliza el orden z (el primer elemento es el que se verá en primer plano).
  • undoAction es la DropAction que se aplica al deshacer o rehacer esta acción. Puede establecer acciones personalizadas para las operaciones de deshacer y rehacer, y añadir los datos que haga falta para esta acción.
Durante la acción de soltar, uno de los procedimientos más comunes consiste en crear elementos nuevos en el gráfico. El componente DropInteractor proporciona la función onDropTemplateFunction para crear los elementos nuevos con arreglo a una plantilla basada en el elemento soltado. Esta función determina qué plantilla hay que utilizar cuando se crean elementos nuevos del gráfico durante la acción de soltar. Habitualmente la llama el editor de diagramas en la función resolveNodeTemplate y tiene el formato siguiente:
function onDropTemplate(droppedItem,dataItem,diagram)
Estas funciones se pueden establecer directamente mediante los códigos siguientes:
onDropFunction="onDrop" onDropTemplateFunction="onDropTemplate"

El componente DropAction

El componente DropAction contiene todas las funciones necesarias para deshacer y rehacer la acción de soltar. Puede personalizar esta acción añadiendo las funciones de usuario que normalmente se llaman desde la función onDropFunction. Están disponibles los métodos siguientes:
  • setDroppedItem: establece el elemento que se va a soltar.
  • getDroppedItem: obtiene el elemento que se ha soltado.
  • setDroppedPosition: establece las coordenadas del gráfico de la posición de soltar.
  • getDroppedPosition: obtiene las coordenadas del gráfico de la posición de soltar.
  • setElementsList: establece la lista de elementos que contiene los elementos del gráfico que coinciden con la posición de soltar.
  • getElementsList: obtiene la lista de elementos que contiene los elementos del gráfico que coinciden con la posición de soltar.
  • setDropInteractor: establece el interactuador de soltar.
  • getDropInteractor: obtiene el interactuador de soltar.