Arrastando e Soltando

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ção nodeCreator. 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ção nodeCreator 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 por dojo.dnd.manager.
  • point é a posição do ponto de soltura nas coordenadas do gráfico.
  • diagram é o diagrama atual.
  • elements é a matriz de graphElements localizada atrás do ponto de soltura. Usa a ordenação z (o primeiro elemento é o que está no primeiro plano).
  • undoAction é o DropAction 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.