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
Check the Draggable option in the list. Note that an object can be both draggable and droppable.
Define a drop zone
Trigger an action when dragging
- 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)
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
Be careful: if your droppable object has several matching associations: there will be 3 new triggers for each one.