Prototyping drag & drop

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

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. On Drag Stop contains an embedded condition you can define. For example, you can define that when dragging stops in the area of a certain element, do some resulting action. See this tutorial for an instance of how this works.

drag drop event triggers

In addition to the usual resulting actions for events, “On Drag” triggers have a few unique actions:

Move: moves an element to a pre-determined position on the Canvas, defined in these 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 Calculated Expression builder
Pin position: For “On Drag Start” or “On Drag Stop” events – pin an element to center/left/right/top/bottom of the Canvas.

Now we’ll explore a few of the dragging interactions you can create.

Use “On Drag” 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 element you’d like to be draggable as the target of the action.
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.
Then, click “Simulate”. Drag your element around the Canvas with your mouse.

You can also restrict the drag movement of an element within a container, like a Dynamic Panel.
restricting on drag
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 element you’d like to drag as the target of the action.
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.

An “On Drag Start” can be useful for triggering an action only when dragging begins.

To do so:

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 Start” + “Move” event, selecting the element you’d like to drag as the target of the action.
Below, set X and Y positions as preferred, and specify some easing. Click “OK”.
Then, click “Simulate”. Drag your element and see how it moves to the specified position on the screen.

Using “On Drag Stop” you can trigger any element to revert to its start position once dragging stops.
revert on drag stop
Here’s how:

Create an “On Drag” + “Move” event, moving an element with the cursor (see “Dragging with mouse” above).
Next, go to the Events palette and click the “Add Event” button.
Select an “On Drag Stop” + “Move” event.
Below, set the X position to “Drag start position” and choose an easing option. Click “OK”.
Click “Simulate”. Drag your element around the Canvas with your mouse. When you stop dragging and release the element, it will automatically revert to its original position.