Drag & Drop
Bonzai avatar
Written by Bonzai
Updated over a week ago

Various elements can now be enabled with either a 'Drag' or a 'Drop' property. The following visual represents an output possible by using this feature.

How to use

All the compatible elements have the 'Drag & Drop' switch present within the right property pane. By default both 'Drag' & 'Drop' are disabled.

To enable the feature, all one needs to do is click on the desired property. Now, for either 'Drag' or 'Drop' there are various properties to each, which can be customised. Also, there are specific Drag and Drop based events which are made available.

Compatible Elements

Text, Button, Hotspot & Image


By enabling the drag feature, the element can be dragged from its initial state and moved to a new position within the creative.

The following properties are present for draggable elements.

Return on invalid drop:

By enabling this, when a draggable element is dropped at a non stipulated 'drop zone', it classifies as an 'invalid drop'. This property decides what should happen to the dragged element on an 'invalid drop' i.e. should it return to its original position or maintain this new position where it is dropped. The default state is set to return to the original position.

Invalid Drop - Return to origin (Default option)

Invalid Drop - Stay

Hide on successful drop:

Normally when the dragged element is successfully dropped, we've seen that users hide the dragged element and show a different version of it, or even trigger some other visuals. Keeping that in mind, to avoid handling a lot of 'Hide' events, the in-built property is present to automatically hide the dropped element.

Restrict drag direction:

This feature restricts the motion of the draggable element. It can be restricted to either a 'Horizontal' or 'Vertical' movement. If enabled, the movement will be restricted to that plane but to either direction from the origin. See below visual.


By enabling the drop feature on an element, it becomes a designated 'Drop zone' for the draggable elements within the creative.

Drag Events:

  1. Drag Start

  2. During Drag

  3. Drag End - Invalid Drop

Refer to the visuals below

Drop Events:

  1. Individual Drop

  2. Combination Drop

  3. Entered Drop Zone

  4. Left Drop Zone

Refer to the visuals below

Points to note

  1. A successful drop is detected if 60% of the draggable element is within the designated drop zone.

  2. After a successful drop, the draggable element cannot be dragged again.

  3. The 'Drop-zone' needs to be lower than the 'Draggable' elements (layer order)

  4. The drag area is bound within the current page.

Possible Outcome

The below example is one which depicts the use of the drag & drop feature to create interaction within a creative from the Automotive sector.

Below is an example where based on a successful drag & drop, we trigger an animation timeline.

Another example below shows an outcome using just the 'drag' function. Here we restricted the drag to the horizontal direction. Also, rather than looking for a successful drop, we fired the remaining actions by reading 'Drag Start' and bound the resulting actions to fire after a 1sec delay.

Do note that the only restriction to the drag area is the page boundary.

In the above example, we've tried to create an effect to gain attention to the 'Drop-zone'. We've achieved this as follows:

  • Created the pulse animation by scaling the layer. This animation was set on a new timeline.

  • On 'During Drag' event of the draggable layer, we start the timeline

  • We paused the timeline on Invalid Drop and also on Successful Drop

So in the above examples, it is about how creatively you use the function for the desired output.

Did this answer your question?