This node adds drag-and-drop behavior to a UI element.
The Drag node makes a target element movable by the user.
The Drag node attaches to a visual element and handles the logic for dragging it around the screen. It outputs the current position and drag status.
General
| Data | Description |
|---|
| Target | The visual element to make draggable. |
| Enabled | Boolean. |
Constraints
| Data | Description |
|---|
| Axis | "Both", "X", "Y". Restrict movement direction. |
| Bounds | Optional object defining limits . |
Outputs
State
| Data | Description |
|---|
| Is Dragging | Boolean. |
| Position X | Current X offset. |
| Position Y | Current Y offset. |
Events
| Signal | Description |
|---|
| Drag Start | Triggered on mouse down. |
| Drag End | Triggered on mouse up. |
Usage
Draggable Window
- Create a "Window" Group.
- Connect Window to Drag node.
- The user can now move the window.
Slider Knob
- Restrict Axis to "X".
- Use Position X to calculate a value.
Detailed Behavior
- Transform: It modifies the CSS property of the target.
Troubleshooting
- Not Moving: Ensure the target element has or if not using transforms.