Draggables And Droppables

Draggables and droppables are powerful features that will shine on anything from marketing games to product selections and configurations.

How To Setup Draggables

Only floating components can become Draggable. To make a floating component draggable:

1. Right-click on it to open its context-menu
2. Open the Addons menu
3. Then enable Draggable Component

That component will have the following new settings and features available.

Draggable Settings

Open the context menu of a draggable component to find its Draggable Settings.

Drag Handle

Select which component or components that are internal to the draggable component you wish to use as the handle for dragging the component. For example, give an inner component the tag “handle”, and then select that component in this setting based on the tag “handle”.

• If you do not specify this: you will be able to drag the component no matter where you click on it
• If you specify one or more handles: only by clicking and dragging a handle will the component be dragged

Containment

Select which component limits the area in which the draggable component can move. If you do not define this, then the component can be dragged freely.

Drag Axis

Define if the dragging motion should be horizontal only, vertical only, or both (so any direction). Default is Both.

Draggable Action Triggers

Draggable components have two new action triggers added to their Actions setting on their context-menu:

• When dragging starts
• and When dragging stops

You can use those triggers to run actions on those situations.

How To Setup Droppables

A droppable is an area where draggables can be dropped in.

Note: Although you can use draggables without droppables, there are many circumstances where you will want to recognize an item being dropped on a particular place and do something from that point on.

Any component on your page can become a droppable area. To make a component into a droppable area:

1. Right-click on it to open its context-menu
2. Open the Addons menu
3. Then enable Droppable Area

That component will have the following new settings and features available.

Droppable Settings

Open the context menu of a droppable component to find its Droppable Settings.

Accept

Select which components are eligible to be dropped on the component. If you leave this unspecified, then all Draggable Components will be accepted.

If a component dropped in this Droppable Area is:

• Not accepted: Then nothing happens.
• Accepted: Then the Droppable Action Triggers will trigger.

Current Dragged Component

A droppable has the following values when a accepted component is dropped on it:

• Current Dragged Component value
• Current Dragged Component Tags value.

These values can then be used on conditions and actions.

Droppable Action Triggers

Once a component becomes a droppable area, there are three new action triggers that are added to its Actions setting on its context-menu:

• When draggable enters
• and When draggable exits
• and When draggable is dropped

You can now use those triggers to run actions on any of those situations.

Component Tags

Component Addons

Triggers, Conditions and Actions

Identifying And Selecting Components

Collision Addon