Drag & Drop

Drag and drop gives people a visual way to pick up and move elements just like we would in the real world. Easily create drag and drop interactions in your application. Great for puzzles, quizzes and playful modules.

How it works?

In PandaSuite, a drag and drop action is composed of 2 objects: 

  • The object that can be moved: the Draggable
  • The container where it can be placed: the Droppable / Drop zone

You need to insert a Drag & Drop component for each of these objects and define their type: Draggable or Droppable.  Then you must define which draggable objects are allowed to be placed on which droppable containers. 

Make an object draggable

Click Components and choose Drag & Drop.  Double-click on the component area to insert the visual element that will be dragged inside (for example an image).
Open the Component Properties window.

Check the Draggable option in the list. Note that an object can be both draggable and droppable. 


Define a drop zone 

Add a new Drag & Drop component. This component can be empty. 
In the Properties window, check the Droppable box
Now you have to associate the draggable object(s) that can be accepted on the droppable object.  This can only be done from the Properties window of the droppable object. 
Click on + ADD DRAGGABLE and choose from the list. An orange color visually indicates the draggable you have chosen.


Trigger an action when dragging

Select your draggable component and click on the Actions icon.
You have 2 triggers based on this dragging object:
  • Dragging: when the user has placed his finger on your draggable object and starts moving it
  • Return: when the user releases the pressure on your draggable object and it is returned to its original location (no association with a droppable object) 

drag and drop

Trigger an action when dropping

To create actions related to the drop zone, select your droppable object (which has been previously associated) and you have access to new triggers :

  • Dropping (name of the draggable) : when your user releases the pressure on your draggable object and this one is well positioned on the droppable object (successful association)
  • Entering (name of the draggable) : when your user reaches the area of the droppable with his draggable object
  • Exiting (name of the draggable) : when your user leaves the zone of the draggable with his draggable object

drag and drop

Be careful: if your droppable object has several matching associations: there will be 3 new triggers for each one.

Still need help? Contact Us Contact Us