Expert

Draggable Objects & Snap Targets

EXP 4 • 10 min read

What you'll learn

Make an object draggable by the player
Set drag constraints (axis-locked movement)
Define snap target zones on the scene
Fire events when an object reaches a snap target
Build a multi-slot placement puzzle
Build a constrained slider puzzle
Require an inventory item for a snap interaction

What Are Draggable Objects?

A draggable object can be clicked and dragged by the player to any position on the scene — or within a constrained area. When the player drags the object close enough to a defined snap target zone, it locks into place and fires an event.

Draggable objects enable a distinct category of puzzles that feel hands-on:

Placing ritual items on altar pedestals
Sliding a book to reveal a hidden switch
Positioning planets in a star chart
Fitting puzzle pieces into slots
Dragging a key sprite onto a lock

Making an Object Draggable

Select an object on the canvas. In the Property Panel, find the Draggable section and toggle "Is Draggable" ON. Additional options appear:

Constrain X — Lock horizontal movement. The object can only slide vertically.
Constrain Y — Lock vertical movement. The object can only slide horizontally.
Return on miss — If the player drops the object somewhere without a valid snap target, it animates back to its original starting position.
Drag Z-order — Bring the object to the front (highest layer) while it is being dragged, so it appears above other objects.

Defining Snap Targets

In the Property Panel's Draggable section, click "Add Snap Target". Fill in the fields:

Target X, Y — The center point of the snap zone, specified in canvas coordinates. You can type in values or use the visual picker on the canvas.
Snap Radius — How close (in pixels) the dragged object must get to the target center before snapping. Example: 40px.
Target ID — A unique name for this snap point, used in events. Example: slot_1, altar_left, lock_keyhole.
Required Item — (Optional) Only allow snapping if the player currently has a specific inventory item. Leave blank to snap freely.

A single draggable object can have multiple snap targets — useful for slider puzzles with several valid positions.

Snap Events

When the draggable object snaps to a target, it fires a "Dragged to Target" trigger. Set this up in the Event Panel:

Open the Event Panel for the draggable object
Add a new event
Trigger: Dragged to Target → select the snap target ID from the dropdown
Add your actions: Show Dialogue, Reveal Object, Update State, Play Sound — anything you want to happen when the object lands in that slot

Create a separate event for each snap target the object has. The correct event fires based on which target was reached.

Multi-Slot Puzzle Pattern

Example: 3 runestones that must each be placed on one of 3 altar pedestals before a reward is revealed.

Setup:

State variable: runestones_placed (Number, default 0)
Make each runestone sprite draggable with Return on miss ON
Each pedestal background object has one snap target defined (radius ~50px, ID: pedestal_1, pedestal_2, pedestal_3)

Events on each runestone:

Trigger: Dragged to Target → matching pedestal ID
Actions: [Increment runestones_placed +1, Disable Draggable (so it stays in place)]

Reward event (global or on scene):

Trigger: State Changed → runestones_placed
Condition: State Greater Than → runestones_placed ≥ 3
Actions: [Show Object "reward_chest", Play Sound "puzzle_win", Show Dialogue "The altar glows..."]

Slider Puzzle with Constraints

A horizontal slider that reveals different clues at each position:

Object: toggle Constrain Y ON — the slider can only move left and right
Add snap targets at each horizontal position: pos_1 at X=200, pos_2 at X=400, pos_3 at X=600 (all at the same Y, radius ~25px)
Each "Dragged to Target" event on the slider shows a different clue or reveals a different object

Note: This pattern complements the built-in Slider Lock puzzle type (available via Insert → Puzzle). Use draggable sliders for custom visual mechanics where you need full control over appearance and behavior. Use the Slider Lock puzzle type for a standard numbered-position slider in a puzzle overlay.

Drag + Item Requirement

A lock that only accepts a dragged key sprite if the player actually has the key in their inventory:

Make the key sprite draggable
On the lock object's snap target, set Required Item: key (the inventory item ID)
If the player drags the key without having it in inventory, the snap is rejected and the key returns to its start position
When a valid drag occurs, the "Dragged to Target" event fires — actions: [Remove item "key" from inventory, Hide Object "lock_locked", Show Object "lock_open", Play Sound "unlock"]

This creates a satisfying physical interaction where the player literally drags the key to the lock, rather than a simple click interaction.

Tip: Use a larger snap radius (60–80px) for casual puzzle games where precision is not the point. Use a smaller radius (20–30px) when accurate placement is itself the challenge.

Warning: Too many draggable objects on a single scene can feel cluttered and frustrating. Keep it to 1–4 draggable objects per scene for the best player experience.

Try it: Build a simple constellation puzzle. Place a star-pattern reference image as a background. Create 3 small star marker objects, each draggable with Return on miss ON. Define snap targets at the three correct star positions with a radius of 40px. When all three markers are snapped correctly (use a counter variable), reveal a reward object or show a success message.