Skip to content

Tutorial: Your First Drag and Drop

Build a working interaction from scratch - a cube that moves from one spot to another when it enters a zone. No scripting required; everything is configured in the Inspector.

By the end you will press Play, push the cube into a trigger area, and watch it snap to a new position automatically.

Prerequisites: Octoputs installed (Installation), a new empty scene.

1. Scene Setup

Create the following GameObjects:

  1. Cube (GameObject > 3D Object > Cube) - this is the item that will move.
  2. SourcePoint (empty GameObject) - the spot where the cube starts.
  3. DestinationPoint (empty GameObject) - the spot the cube will move to.
  4. DetectionZone (empty GameObject) - a trigger area that notices when the cube arrives.

Position them so the Cube is near SourcePoint, and DestinationPoint is a short distance away. Place DetectionZone overlapping with DestinationPoint.

2. Mark the Cube as Movable

Select the Cube and add the AttachableObject component. This tells Octoputs "this object can be picked up and placed."

Add Component > Octoputs > Core > Attachable Object

The Inspector shows:

  • Filtering section - Controls which slots accept this object. Leave empty for now (accepts all slots).
  • Attaching / Attached / Detaching tabs - Each tab controls one phase of the object's lifecycle (moving into a slot, staying there, or leaving). The defaults work for a basic setup.

What the tabs mean

Each tab controls one phase of the lifecycle. Conditions gate entry to the phase. The Process runs for the duration of the phase (e.g., moving the object into position). Events fire at phase boundaries.

3. Create the Starting Slot

The cube needs a place to start. Select SourcePoint and add the AttachmentPoint component - this turns it into a slot that can hold objects.

Add Component > Octoputs > Core > Attachment Point

The default AttachmentPoint comes pre-configured to handle reparenting, physics, and positioning automatically. For this tutorial, the defaults are all you need - the cube will snap to whatever slot it attaches to.

Pre-attach the cube

To start the scene with the cube already attached to SourcePoint, position the Cube at SourcePoint's position. At runtime, use an initial transfer to establish the attachment, or call AttachmentPoint.Attach() from a startup script.

4. Create the Destination Slot

Select DestinationPoint and add the AttachmentPoint component the same way.

No changes needed - the defaults work.

5. Set Up the Trigger Area

Now you need something that notices when the cube enters the destination area. Select DetectionZone and do the following:

  1. Add a Box Collider component. Check Is Trigger. Scale it to cover the area around DestinationPoint.

  2. Add an AttachableDetector component - this watches the trigger zone and remembers which objects are inside it.

    Add Component > Octoputs > Detection > Attachable Detector

  3. The detector needs somewhere to store the objects it finds. On the same GameObject, add an AttachableObjectStorage component - think of it as a list of "objects currently in range."

    Add Component > Octoputs > Core > Attachable Object Storage

  4. Back on the AttachableDetector, assign the AttachableObjectStorage to the Storage field so detected objects get added to the list.

Collider layers

The trigger collider on DetectionZone and the collider on the Cube must be on layers that interact in Unity's Layer Collision Matrix (Edit > Project Settings > Physics). By default, all layers interact.

6. Tell Octoputs Where to Place Objects

The system now knows which objects are in range, but it also needs to know which destination slots are available. Add an AttachmentPointStorage component to the DetectionZone - this is a list of "slots that can receive objects."

Add Component > Octoputs > Core > Attachment Point Storage

This storage should contain the DestinationPoint. The easiest way: add an AttachmentPointListDetector to DetectionZone, reference DestinationPoint in its list, and assign the AttachmentPointStorage to its Storage field.

7. Connect Detection to Action

Everything is in place - you have objects being detected and slots listed. Now add the component that actually moves objects into slots.

On DetectionZone, add an AttachableTransferProcess. This is the "engine" that takes an object from one list and places it at a slot from another list.

Wire it up:

  • Attachable Source - Point it to the AttachableObjectStorage (the list of detected objects).
  • Attachment Point Destination - Point it to the AttachmentPointStorage (the list of available slots).

Configure the transfer settings:

Setting Value
Transfer Amount OneAtOnce
Selection Mode First

Triggering the transfer

AttachableTransferProcess implements IProcess. You need something to start it. The simplest approach: add the transfer process inside the AttachableDetector's detection event, or use a ProcessLauncher component wired to the detector's OnDetected event.

8. Test in Play Mode

Press Play. Move the Cube into the DetectionZone trigger area. Here is what happens:

  1. The trigger detects the Cube.
  2. The transfer process finds the Cube in the object list and DestinationPoint in the slot list.
  3. The Cube detaches from SourcePoint (if attached) and attaches to DestinationPoint.
  4. You see the Cube snap to DestinationPoint's position.

9. What Just Happened?

Here is the data flow that occurred:

sequenceDiagram
    participant Cube as Cube (AttachableObject)
    participant Trigger as DetectionZone (Trigger)
    participant AStorage as AttachableObjectStorage
    participant Transfer as AttachableTransferProcess
    participant PStorage as AttachmentPointStorage
    participant Dest as DestinationPoint (AttachmentPoint)

    Cube->>Trigger: Enters trigger collider
    Trigger->>AStorage: Pushes Cube into storage
    Transfer->>AStorage: Reads available objects
    Transfer->>PStorage: Reads available points
    Transfer->>Dest: Attaches Cube
    Dest->>Cube: Runs attaching process (reparent + pipeline)
    Dest->>Cube: Runs attached process (hold at position)

The key idea: each step is a separate, swappable piece. You can replace the trigger with a raycast, add smooth physics-based movement instead of snapping, or add filters to restrict which objects go where - all without changing the other pieces.

Next Steps