Dragging and dropping

The drag and drop functionality allows you to perform any action while dragging external components inside the diagram. This functionality is bindable through the Diagram widget, and the action is customizable. It is commonly used to create a graph by dragging elements from a palette.

The DropSource component

The DropSource is a small component that can be dragged inside a graph to perform a specific action in the diagram. It is a standard Dojo component (dojo.dnd.Source) that you can configure by dragging custom elements into the diagram. While dragging the component, an avatar is shown behind the mouse cursor, to indicate you that the drag-and-drop action is taking place.
For example:
var dndObj = new dojo.dnd.Source(node, {singular: true, copyOnly: true, creator: nodeCreator});
The nodeCreator function receives the item and returns:
return {node: node, data: item, type: type}
where:
  • node: a DOM representation of the data item built by the nodeCreator function. This node must have a unique ID. If no ID is assigned, it is generated and assigned later by the container.
  • data: the data item itself. The nodeCreator function can modify or replace it.
  • type: an array of strings, that identify the type of the item. It is used during the drag-and-drop operation to select compatible targets.

The DropInteractor component

The DropInteractor handles the dropping action in the diagram. When activated, the DropInteractor detects the diagram dropping action, identifies the diagram point where the dropping action occurred, and finds any graph element that is behind the dropping point. When the dropping occurs, onDropFunction is called. The bound function has the following format:
function(droppedItem,point,diagram,elements,undoAction)
The function arguments are as follows:
  • droppedItem is the dropped item, managed directly by the dojo.dnd.manager.
  • point is the position of the drop point in graph coordinates.
  • diagram is the current diagram.
  • elements is the array of graphElements found behind the drop point. It uses z-ordering (the first element is the one in the foreground).
  • undoAction is the DropAction applied when undoing or redoing this action. You can set customized actions for undo and redo, and add any other data necessary for this action.
During the dropping action, one of the most common procedures is to create new elements in the graph. The DropInteractor provides the function onDropTemplateFunction to create the new elements according to a template based on the dropped item. This function determines which template to use when new graph elements are created during the dropping action. It is typically called by the Diagram Editor on the resolveNodeTemplate function, and has the following format:
function onDropTemplate(droppedItem,dataItem,diagram)
These functions can be set directly through markups:
onDropFunction="onDrop" onDropTemplateFunction="onDropTemplate"

The DropAction component

The DropAction component contains all the functionality to undo and redo the dropping action. You can customize this action by adding user functions that you typically call from the onDropFunction. The following methods are available:
  • setDroppedItem: sets the dropped item.
  • getDroppedItem: gets the dropped item.
  • setDroppedPosition: sets the drop position graph coordinates.
  • getDroppedPosition: gets the drop position graph coordinates.
  • setElementsList: sets the elements list that contains the graph elements that match the drop position.
  • getElementsList: gets the elements list that contains the graph elements that match the drop position.
  • setDropInteractor: sets the drop interactor.
  • getDropInteractor: gets the drop interactor.