Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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.

Drag and Drop events in your interactive prototypes

Events

  • 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

events-drag-drop-interactive-prototype

Actions

  • 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.

Drag event in interactive prototypes

To do so, follow the next steps:

  1. Select the widget you want to be “draggable” is on the screen.
  2. Add an ‘on Drag + Move‘ event.
  3. 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.

Drop event in interactive prototypes

In order to define the target area of a drop action, perform the following steps:

  1. Create a new prototype and select the widget you want to drag and drop on the screen.
  2. Add an ‘on Drag Stop‘ event.
  3. 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.

Next tutorial > Design a Custom Slider in your interactive wireframes

6 Comments

  1. Jordi Says :

    January 29, 2015 at 5:44 pm

    Not supported in 6.4?

    • Lidia Rodriguez

      March 6, 2015 at 10:21 am

      Yes it is.

  2. Mike Myles

    May 26, 2015 at 7:40 pm

    Demo example doesn’t work in simulation mode, or in Chrome. Needed to export to HTML and run in Firefox. Are these know limitations? Can Chrome settings be adjusted to get it to work?

    • Lidia Rodriguez

      July 3, 2015 at 10:38 am

      Hi Mike, it should work on chrome as well… Could you try again?

  3. Roberto

    June 18, 2015 at 11:04 pm

    Hi there!

    Is there a way to, instead of just move the object with Insert Into, clone as new object? I want to build a prototype that the user can click on an add button and another element duplicates.

    Any way for me to achieve this?

    Thanks!

    • Lidia Rodriguez

      July 3, 2015 at 10:04 am

      Hi Roberto, you can simulate this action by creating hidden elements that will be shown when the button is clicked, but there is not a real way of creating elements with an action on simulation.