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ónnodeCreator
. 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ónnodeCreator
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 pordojo.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 degraphElements
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 laDropAction
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.