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.

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.

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.

Refer to the visuals below

Refer to the visuals below

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:

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