Prototyping drag & drop

With Justinmind, you can create a number of drag and drop interactions in your prototypes.

Drag and drop event triggers

• On Drag Start: occurs when dragging begins
• On Drag: occurs as the element is dragged
• On Drag Stop: occurs when the dragging stops, i.e. when the element has been dropped

Drag and drop actions

Basic “On Drag” + “Move” events

Move: moves an element to a pre-determined position on the screen.

The position can be defined in different ways:

1. Current: maintain current position
2. Fixed: moved to a fixed position on the canvas
3. Offset: move by an offset defined in pixels
4. With cursor: move element around the screen according to the mouse movement (only for “On Drag”)
5. Drag start position: (for “On Drag” or “On Drag Stop” events only) move the element to its initial position when dragging stops
6. Calculated: move element to a position defined in the Expression builder

Additional options

Pin to center/left/right/top/bottom: (for “On Drag Start” or “On Drag Stop” events only) pin element to center/left/right/top/bottom

Dragging a widget around the screen (On Drag)

The simplest of these events is to make an element draggable with the mouse.

To do so, follow these steps:

In a new prototype, select the element you want to make draggable on the canvas.

Go to the Events palette and click the “Add Event” button.

Add an “On Drag”+ “>Move” event, selecting the original element.

Below, set the X and Y positions to “With cursor”. If you only want to drag the element horizontally or vertically, select the “Fixed” option respectively. Click “OK”.

Then, click “Simulate”. Drag your element around the canvas with your mouse.

Restricting the movement of an element (On Drag)

You can also restrict the movement of an element that is contained within another element.

To do so, follow these steps:

In a new prototype, select an element contained within a Dynamic Panel.

Go to the Events palette and click the “Add Event” button.

Add an “On Drag” + “Move” event, selecting the original element.

Below, set the X and Y positions to “With cursor”. Then, check the “Constraint by parent container” box and click “OK”.

Click “Simulate”. Drag your element around the canvas with your mouse. Notice that you are only able to drag it within your Dynamic Panel.

On Drag Start

When an element begins to move upon being dragged, the event “On Drag Start” will be triggered.

This event is useful for creating toggle on and off interactions.

To do so:

1. In a new prototype, select the element you want to make draggable on the canvas.
2. Go to the Events palette and click the “Add Event” button.
3. Add an “On Drag Start” + “Move” event, selecting the original element.
4. Below, set the X positions to “Fixed” at 600 pixels (to match our example). Select “linear” from the “Easing” option at 1500 milliseconds. Click “OK”.
5. Then, click “Simulate”. Drag your element to the right and see how it moves 600 pixels to the right on the screen.

Reverting an element to its original position (On Drag Stop)

Using “On Drag Stop” you can trigger any element to revert to its start position once dragging stops.

Follow the steps in Dragging a widget around the screen above. 

Once you’ve completed the steps, go to the Events palette and click the “Add Event” button.

Select On Drag Stop from the first drop-down.

Click the gear icon in the top right-hand corner of the “Any component” input field, select the element you want to drop on the screen and click “OK”.

Back in the Events dialog, select the action you want to perform before dropping the element (e.g. “Move”).

Select the element again in the modal window.

Below, set the X positions to “Drag start position” (to match our example). Select “linear” from the Easing option, and set the Duration at 200 milliseconds. Click “OK”.

Click “Simulate”. Drag your element around the canvas with your mouse. When you stop dragging it, it will automatically revert to its original position.

You can download our example here.