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. 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 and drop actions

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.

Drag and drop examples

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

Dragging with mouse

Use “On Drag” to make an element draggable with the mouse.

To do so, follow these steps:

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

Restricting the drag to a specific area

You can also restrict the drag movement of an element within a container, like a Dynamic Panel.

To do so, follow these steps:

1. In a new prototype, select an element contained within a Dynamic Panel.
2. Go to the Events palette and click the “Add Event” button.
3. Add an “On Drag” + “Move” event, selecting the element you’d like to drag as the target of the action.
4. Below, set the X and Y positions to “With cursor”. Then, check the “Constraint by parent container” box and click “OK”.
5. Click “Simulate”. Drag your element around the Canvas with your mouse. Notice that you are only able to drag it within your Dynamic Panel.

Triggering an action when dragging starts

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

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

Reverting an element to its original position

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

Here’s how:

1. Create an “On Drag” + “Move” event, moving an element with the cursor (see “Dragging with mouse” above).
2. Next, go to the Events palette and click the “Add Event” button.
3. Select an “On Drag Stop” + “Move” event.
4. Below, set the X position to “Drag start position” and choose an easing option. Click “OK”.
5. 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.

You can download our example here.