Skip to main content

Drag and Drop

Drag and Drop lets users interact with objects on the screen.

To make a node support drag and drop, set both its isUserInteractionEnabled and draggable properties to true. The user can then drag the node around the screen.

Drag Events​

The following events are fired when the user drags a node:

  • DragStart - When the user starts dragging the node.
  • Drag - When the user continues to drag the node.
  • DragEnd - When the user stops dragging the node.

These events also have a position property that is the position of the node at the time of the event.

The below example changes the circle's color to green when the dragging starts and changes it back to purple when the dragging stops. It also logs the position of the circle when the dragging starts and stops.

Loading...
Explore:
  • To implement a drop functionality on a target, this example checks if the dragged circle is fully inside the box. If so, it changes the color of the circle from red to green.