Drag & Drop

Sylvain Joly

Search Knowledge Base by Keyword

You are here:

Drag & Drop

(Note: This condition is not available in SpatialStories for AR)


Drag & Drop is the ability to set a target destination for an object to go into. This feature is extremely useful to define snapping zones for gaming, educational, healthcare experiences, or any time you want your user to place an element at a specific spot.

In the following example, the hat is dragged and dropped on the character’s head:

(If you prefer, scroll down at the bottom of this page to a video describing the whole process)

Drag & Drop is more than a condition, it is a whole system. Follow the steps below to setup a Drag & Drop interaction:

  1. Create an IO that will be your Drop object, the object you want to drop somewhere specific like the hat in the example (see Create your first IO);
  2. Click on Enable Drag And Drop on the root of the Drop Object;
  3. Add or generate Drop target(s) and place it where you want to drop the object (see explanations below);
  4. Configure the Drop object (see explanations below).

Drop Target

  • You can choose any object in the scene to be your drop target.
  • Alternatively you can create an automatic drop target generated automatically in the root of your IO.
  • Once the “Enable Drag And Drop” is checked you will be able to see a field called “generate targets“.
  • Just enter the number of targets you want to generate and hit the “GO” button.
  • Your target is automatically generated and all setup*, you just have to place it where you want to drop the object.

Warning: In this version, when a target is generated it will clone all the interactions you already have inside your object; make sure to remove them or change them according to your needs.

Drag and Drop Parameters

At the top level of an Interactive Object, you have a Gaze_InteractiveObject component. Here, if “Enable Drag And Drop” is set to true, you can define the parameters to allow a drop as follow:

  • Drop on occupied targets: if this is checked you allow an object to be dropped on a target where there has already been a dropped object.
  • Respect X/Y/Z Axis (and mirrored): if you choose to constrain the drop to the target’s rotation, here you can specify which axis are mandatory to be matched in order to allow the drop. I.E. if you check ‘Respect X Axis’, the drop object must have the same orientation on its X axis than the drop target (with the specified angle threshold).
  • Angle Threshold: represents the precision in which the orientation of the drop object on the drop target should be as a percentage. I.E. if the threshold is set to 100 with Respect X Axis activated, that means that the drop object’s rotation on the x axis should be exactly the same as the x axis orientation of the drop target.
  • Minimum Distance: the distance between the drop object and the drop target. If not within this distance, the drop is not allowed.
  • Attached: if this is checked the dropped object will be fixed in the target position after dropped.
  • Snap on Drop: if you want the object to have an animation when he is reaching the target position.
  • Snap before Drop: if you want this animation to happen before releasing the object
  • Time to Snap: used to set the duration of the transition from where you release the object to its drop target location.

Drag&Drop Condition

If you want something to happen when you drop an object onto another. Example: When the player finds the key and snaps it in the doors, the door opens. To launch the animation of the door opening you can create an interaction that is validated when the key is dropped on the key hole.

Two things can be specified:

  1. The moment the condition is validated:
    INIT (not used)
    DROPREADY (when the drop object is inside the min radius established)
    DROPREADYCANCELED (when the drop object goes out of this radius)
    DROP (when the object is dropped)
    PICKUP (when the object is taken again but has not been released)
    REMOVED (when the object is removed from the target)
  2. The target(s) you want to take into account to validate this condition (it can be any of its targets or you can specify a particular set of targets)

Here’s a video of the whole process of setting a Drag & Drop condition: