Description

With drag and drop triggers, experience designers can trigger actions based on both drag and drag-and-drop events. All assets and collections support drag and drop triggers.

Drag and Drop Triggers

There are four drag and drop triggers. These triggers are available for all assets / collections with a Free or Pinnable container. Click the image below to enlarge.

• Drag is initiated: Actions are called when the item in question is first dragged by the user, regardless of direction.
• Is dragged away from: Actions are called when the finger/pen dragging the item in question passes over and outside the edge of a specified target. (If the item is thrown rather than dragged, the center point of the thrown item must pass over and inside the edge of the target.) The target could be any other item in the scene.
• Is dragged over: Actions are called when the finger/pen dragging the item in question passes over and inside the edge of a specified target. (If the item is thrown rather than dragged, the center point of the thrown item must pass over and inside the edge of the target.) The target could be any other item in the scene.
• Is dropped on: Actions are called when the finger/pen dragging the item is positioned anywhere over a specified target and then releases the item. The target could be any other item in the scene.

NOTE:

• Drag and drop triggers are not activated during animated movement.
• The "Is dragged away from" and "Is dragged over" triggers can be activated multiple times if the dragged item is moved back and forth over the target.
• If an untouched item is located over a target and then dragged, the "Is dragged over" trigger will be activated. In other words, the "Is dragged over" trigger is not exclusive to items that are first outside a target and then dragged over it.

Usage Samples

• as soon as Drag is initiated on an asset you consider drag-able, you can highlight the possible drop zones.
• when an item Is dropped on a target, you can do a Move to action to precisely fix the position of the dropped asset on its target.

In Intuiface Composer Experience Panel, have a look in the Samples tab and download Garment Customization.

Identifying the onscreen location of touches used in drag and drop triggers

Intuiface captures the onscreen location of where a touch occurs in relation to drag and drop triggers. These X,Y coordinates are exposed via read-only properties that can be accessed using binding. For example, when a drag is initiated, you can use the X,Y coordinates of the original location to plant a marker indicating the starting point.

There are four sets of read only properties:

• Relative to item, X
• Relative to item, Y
  • These coordinates are relative to the container of the item being moved
• Relative to overall display, X
• Relative to overall display, Y
  • These coordinates are relative to the display, independent of whether or not the scene is full screen. This could be relevant when the experience has a different aspect ratio from the target display.
• Relative to parent collection, X
• Relative to parent collection, Y
  • These coordinates are relative to a parent collection if one exists.
• Relative to scene, X
• Relative to scene, Y
  • These coordinates are relative to the scene as a whole. These coordinates would be different from coordinates relative to the overall display if the experience and display have different aspect ratios.

Video Summary

The following video illustrates the basic principles of Intuiface's drag-and-drop capability.