Justinmind Prototyper provides you with all the basic tools (set of events and actions) so you can define and simulate most cases of drag and drop you could have in mind. In this section some drag and drop actions will be explained in order to understand how it works.
In Justinmind Prototyer, drag and drop actions are directly related to the events 'on Drag Start', 'on Drag' and 'on Drag Stop'. Combining these events with the action Move we will be able to define almost every single case.
Drag a widget
If what you want to do is to define that a widget in the screen moves when it is dragged, you just need to perform the following steps:
Select the widget you want to be "draggable" on the screen.
Push the 'add event' button and select the event 'on Drag' .
Select the action Move in the interaction's dialog.
Check the widget you want to drag is selected in the canvas inside the dialog and select the option 'With cursor'. Press Ok.
Warning: Notice that when the 'Move - With cursor' action is executed in simulation, the widget associated to it is brought to the top and taken out of its current container.
Drag multiple widgets
If you want to move more than one widget while dragging, you just need to follow the steps explained before but adding new 'Move - With cursor' actions for every additional widget.
Movement restrictions
Move widgets only horizontally or vertically: When dragging a widget, you can also specify its movement direction and therefore, avoid the widget to end up on undesirable positions. In order to define the widgets movement direction when dragged, just select the option 'Move with cursor' - 'Axis X' or 'Axis Y' when defining the Move action in the interactions dialog.
Tip:
This feature could be used to simulate a slider behavior for example.
Movement constraint: Additionally, you can also restrict the movement of a widget within its parent boundaries by selecting the option 'Constraint by parent container' when defining the corresponding Move action.
Drop a widget
When a widget is dropped, it stops moving and the event 'on Drag Stop' is triggered. The event 'on Drag Stop' allows you to define the actions to be perfomed when a widget stops being dragged, but also to define where it must be dropped as a condition for the actions to be executed.
In order to define the target area of a drop action, perform the following steps:
Select the widget you want to drag and drop on the screen. Click the 'add event' button and select the event 'on Drag Stop'. Select any action you want to perform in the interaction's dialog. Click on the gear button next to the label 'When drop on:' to define the widget's area where the widget must be dropped.
Select the target widget from the screen in the new dialog and press Ok. Press ok in the interactions dialog.
Tip: You can combine the 'on Drag Stop' event with the 'Insert Into' action having a container with vertical or horizontal layout as target in order to reorder its children.