Skip to main content

Drag

The drag node is used to make visual nodes draggable with the mouse or touch. The child of a Drag node automatically become draggable.

tip

The Drag node can only have one child, but that child can have many children.

Inputs

Snap To Position X

SignalDescription
DoSend a signal here to trigger a snap to the position specified by Value and with the transition duration specified by Duration.
DataDescription
ValueThis is the X value the the snap action will have as destination when triggered.
DurationThe snap transition duration.

Snap To Position Y

SignalDescription
DoSend a signal here to trigger a snap to the position specified by Value and with the transition duration specified by Duration.
DataDescription
ValueThis is the Y value the the snap action will have as destination when triggered.
DurationThe snap transition duration.

Drag

DataDescription
EnableEnables or disables this node. If it is disabled, drag will not have any affect on child nodes.
AxisSpecifies along which axes the drag will work
a
X: Only horizontal drag is enabled.
Y: Only vertical drag is enabled.
Both: Both horizontal and vertical drag is enabled.
Constrain to parentIf enabled the child nodes being dragged will be constrained to the borders of the parent node so they cannot be dragged outside of the parent bounds.

Other

DataDescription
Start Drag XSpecifies the X position that will be used as the starting point. Setting this will force the child nodes to the specified position.
Start Drag YSpecifies the Y position that will be used as the starting point. Setting this will force the child nodes to the specified position.
ScaleSpecifies the move scale that will be used when dragging the node around. This can correct the drag deltas while you are zoomed in or out.
MountedThis property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the Visible property where the node is still part of the DOM but invisible.

Visual

This node supports the following Visual Input Properties:

Outputs

Other

DataDescription
Child IndexThe place this node has in relation to its parent. E.g. if a Group has three children, then the first child will have Child Index 0, the second child will have Child Index 1, and so on.
ThisA reference to this node. Used in custom Javascript nodes and more.

Bounding Box

DataDescription
Screen Position XWhere this node is on the screen's X-axis, in pixels.
Screen Position YWhere this node is on the screen's Y-axis, in pixels.
WidthCurrent width of this node.
HeightCurrent height of this node.

Mounted

SignalDescription
Did MountSignal sent when this node has been mounted, i.e. has become part of the visual tree and is visible.
Will UnmountSignal sent when this node is about to be removed from the visual tree and become hidden.

Signals

SignalDescription
Drag StartedEmitted when dragging of a child is detected.
Drag EndedEmitted when dragging stopped.
Drag MovedEmitted while a child node is being moved during the drag.

Values

DataDescription
Drag XThe current X position of the dragged node.
Drag YThe current Y position of the dragged node.
Delta XThe horizontal distance a node has been dragged from its last horizontal position. Measured in px.
Delta YThe vertical distance a node has been dragged from its last vertical position. Measured in px.