A funcionalidade arrastar e soltar permite executar qualquer
ação ao arrastar componentes externos dentro do diagrama.
Essa funcionalidade pode ser vinculada através do widget Diagram e a criação é customizável.
Ela é comumente usada para criar um gráfico arrastando elementos
de uma paleta.
O Componente DropSource
O
DropSource
é um pequeno
componente que pode ser arrastado dentro de um gráfico para executar uma ação
específica no diagrama. É um componente Dojo padrão (dojo.dnd.Source
)
que pode ser configurado arrastando elementos customizados no diagrama.
Ao arrastar o componente, é mostrado um avatar atrás do cursor do mouse,
para indicar que a ação arrastar e soltar está ocorrendo. Por exemplo:
var dndObj = new dojo.dnd.Source(node, {singular: true, copyOnly: true, creator: nodeCreator});
A função
nodeCreator
recebe o item e retorna:return {node: node, data: item, type: type}
em que:
node
: uma representação do DOM do item de dados construído pela funçãonodeCreator
. Este nó deve ter um ID exclusivo. Se nenhum ID estiver designado, ele será gerado e designado posteriormente pelo contêiner.data
: o próprio item de dados. A funçãonodeCreator
pode modificar ou substituí-lo.type
: uma matriz de sequências que identificam o tipo do item. Ele é usado durante a operação arrastar e soltar para selecionar destinos compatíveis.
O Componente DropInteractor
O DropInteractor trata a ação de soltar no diagrama. Quando ativado, o
DropInteractor
detecta a ação de soltar do diagrama, identifica o ponto do diagrama em que a ação de soltar ocorreu e localiza qualquer elemento do gráfico que esteja atrás do ponto de soltar. Quando ocorrer a ação soltar, onDropFunction
será chamado. A função de limite possui o seguinte formato:function(droppedItem,point,diagram,elements,undoAction)
Os argumentos da função são os seguintes:
droppedItem
é o item solto, gerenciado diretamente pordojo.dnd.manager
.point
é a posição do ponto de soltura nas coordenadas do gráfico.diagram
é o diagrama atual.elements
é a matriz degraphElements
localizada atrás do ponto de soltura. Usa a ordenação z (o primeiro elemento é o que está no primeiro plano).undoAction
é oDropAction
aplicado ao desfazer ou refazer essa ação. É possível configurar ações customizadas para desfazer e refazer, e incluir quaisquer outros dados necessários para esta ação.
Durante a ação soltar, um dos procedimentos mais comuns
é criar novos elementos no gráfico.
DropInteractor
fornece
a função onDropTemplateFunction
para
criar os novos elementos de acordo com um modelo baseado no item solto. Esta função determina qual modelo usar quando forem criados novos elementos do gráfico
durante a ação soltar. Geralmente ela é chamada
pelo Editor de Diagrama na função resolveNodeTemplate
e possui o seguinte formato: function onDropTemplate(droppedItem,dataItem,diagram)
Estas funções podem ser configuradas diretamente por meio de marcações:
onDropFunction="onDrop" onDropTemplateFunction="onDropTemplate"
O Componente DropAction
O componente DropAction contém toda a funcionalidade para desfazer
e refazer a ação soltar. É possível customizar esta ação incluindo
funções do usuário que você geralmente chama a partir de
onDropFunction
.
Os seguintes métodos estão disponíveis:setDroppedItem
: configura o item solto.getDroppedItem
: obtém o item solto.setDroppedPosition
: configura as coordenadas do gráfico da posição de soltura.getDroppedPosition
: obtém as coordenadas do gráfico da posição de soltura.setElementsList
: configura a lista de elementos que contém os elementos do gráfico que correspondem à posição de soltura.getElementsList
: obtém a lista de elementos que contém os elementos do gráfico que correspondem à posição de soltura.setDropInteractor
: configura o interagente de soltura.getDropInteractor
: obtém o interagente de soltura.