What you will learn

Dragging

With a simple override, you can make any layer draggable.

All the settings

With some more code, you can set possible drag directions, keep the draggable frame in an area, or tweak the inertia animation that starts when you release it. We look at all the possible settings.

Snap to grid with modifyTarget()

Snap to grid

Dynamically change the endpoint of the inertia animation to make the frame always move to one of the points on a grid.

Snap to corner with onDragEnd()

Snap to corner

With the onDragEnd() event, you can animate the frame to the nearest corner when it’s released (or the corner you threw it to).

Tap anywhere to make the box snap to that position

Drag controls

You can control a draggable element with the useDragControls() hook.

You can tap anywhere on the background (which uses this hook) to start dragging.

Try to dodge the obstacles using the trackpad.
#SoLongAndThanksForAllTheFish#Starman

… and you can also use drag controls to create a trackpad in a space game.