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 thenodeCreator
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. ThenodeCreator
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 thedojo.dnd.manager
.point
is the position of the drop point in graph coordinates.diagram
is the current diagram.elements
is the array ofgraphElements
found behind the drop point. It uses z-ordering (the first element is the one in the foreground).undoAction
is theDropAction
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.