How to simulate a Drag and drop in your interactive wireframes
Simulate drag and drop in your interactive wireframes with Justinmind. In this tutorial, you will learn how to do so.
Justinmind provides you with all the basic tools (set of events and actions) to define and simulate many cases of drag and drop interactions.
You can download an example here.
It contains the basic cases of drag and drop plus a couple of more complex cases, and you can use it as a guide to build your own drag and drop interactions.
- On Drag Started: Occurs when dragging begins
- On Drag: Occurs as the widget is dragged
- On Drag Stop: Occurs when the dragging ends, i.e. when the widget is dropped
- Move: This action moves a widget to a certain position in the screen. The move to position can be defined in different ways:
- To position: Use this option if you want to move the selected widget to a known position. The new position can be defined as absolute (fixed) in the screen or relative (calculated) to the container widget. To define the position as absolute, click on the corresponding checkbox labeled ‘Absolute position’.
- By offset: Use this option if you want to move the selected widget by an offset defined in pixels.
- With cursor: Use the ‘on Drag’ event combined with a ‘Move’ action combined in order to move a widget around the screen according to the mouse movement. A movement constraint can also be defined.
- To drag start position: This option can only be carried out by combining an’on Drag’ or ‘on Drag Stop’ event with your preferred action in order to move the selected widget to its initial position when the drag action stops.
- Insert Into: This action inserts a specific widget into a container widget. When a widget is inserted into a container, its absolute position will remain the same if the container has a free layout. Otherwise, the widget will be inserted according to the container’s own layout positioning itself next to the closest container’s child. Widgets that can be used as target containers for this action are dynamic panels, table cells or the entire screen. There is only one restriction for this action: container widgets cannot be inserted into any of their children widgets.
You can define all the different states of a drag and drop using the event types listed above. These events can be easily combined with the two actions to wireframe a wide range of drag and drop interactions.
Drag a widget
The simplest of these interactions is to make any widget in your screen ‘draggable’. That will make the widget move when the user drags it in simulation.
To do so, follow the next steps:
- Select the widget you want to be “draggable” is on the screen.
- Add an ‘on Drag + Move‘ event.
- Make sure that the widget you want to drag is selected and select the option ‘With cursor‘ in the “Left” and “Top” drop-down menus at the bottom of the events dialog. Press OK.
Press the simulate button, click on the widget and drag the widget wherever you want to: it will move with the cursor. If you want to only drag horizontally or vertically, just select the option “Fixed” in the ‘Left’ drop-down menu (to allow only vertical drag) or in the ‘Top’ one (to allow only horizontal drag).
Tip: This feature could be used to simulate a slider behavior.
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.
If you want to move more than one widget while dragging, you just need to follow the steps explained before but adding new ‘on Drag + Move‘ actions for each additional widget.
Drop a widget
When a widget is dropped, it stops moving and the event ‘on Drag Stop‘ will be triggered. The event ‘on Drag Stop’ allows you to define the actions to be performed when a widget stops being dragged, but also to define where it must be dropped as a condition for the actions to be executed. For example, if you want the widget to return to the initial position, you can add an ‘on Drag Start + Move‘ event and define “Drag start position” in the options.
In order to define the target area of a drop action, perform the following steps:
- Create a new prototype and select the widget you want to drag and drop on the screen.
- Add an ‘on Drag Stop‘ event.
- Select any action you want to perform in the sequential interaction drop-down and select the target widget. Press OK.
Tip: You can combine the ‘on Drag Stop’ event with the ‘Insert Into’ action, and have a container with vertical or horizontal layout as the target, in order to reorder its children.
If you want to limit the ‘on drag stop’ execution to a certain widget/group of widgets, click on the gear button next to the text ‘Any component’ in the events dialog to define the widget with which the drop action must be performed.