Preview

This tutorial shows us how to create a variety of drag and drop interactions using the events OnDragStart, OnDrag and OnDragDrop.

Dynamic Panel Tutorial

Drag & Drop Images

Drag & Drop Interface

Now we have to account for the other condition, which is if the image drops onto an area other than the Image Strip.

On Batch1 panel, add a second case to the OnDragDrop with an action to "Move Batch1 to x,y before drag".

Besides moving the image back to its original position, we also want to set the Image Strip back to its default state, so we'll add a second action to this case, "Set Image Strip state to Default State".

Since this case accounts for everything other than what we specified in the first condition, the case will automatically be set to "Else If True".

Generate the prototype and try it out.  When you drag the image thumbnail over any area that isn't the Image Strip, it will return to it's original position, and set the Image Strip back to its default state.

Keep practicing by adding drag & drop interactions to the rest of the images in the batch.  You'll see that life without Drag & Drop--well, it's a drag!

First, open DragAndDropImages.rp and open the "Drag and Drop Images" page.

Select the first image thumbnail in the wireframe. Since we want to make this image draggable, let's move it into a dynamic panel by right-clicking and choosing Convert > Convert to Dynamic Panel.

Label this panel "Batch1".

To drag the image, add a case to the OnDrag event with an action to "Move Panel(s)" and specify the Batch1 panel.  By default, this move action is set to "Move Batch1 with drag".  Click OK to close the Case Editor.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2013 Axure Software Solutions, Inc. All rights reserved.

Mockup Software

Wireframe Software

Flowchart Software

Prototyping Software

SRS Documents

Web Design Software

iPhone Mockup Tool

iPad Mockup App

Visio Alternative

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

The Round Up

There's a few things we want to happen on each stage of the Drag & Drop interaction. When the user drags the image, we want to set the image strip below to a state that displays the message, "Drop an image here to remove it from the batch."

We want to set this panel on the start of the drag, so add a case to the OnDragStart event of Batch1 with the "Set Panel state(s) to State(s)". Specify the Image Strip panel and the Remove State state. Click OK to close the Case Editor. The OnDragStart case you added should look like the one in the screenshot above.

When you drop the image onto the page, it will fire different interactions depending on where you drop it.

In this first condition, we want to check if it drops on top of the Image Strip area, so add a case to the OnDragDrop event, click "Add Condition" and add the condition: "If area of widget Batch1 is over area of widget Image Strip".

Click OK to close the Condition Builder.

When the image drops in the Image Strip area, we want to "remove" it from the batch, so in the Case Editor, select "Hide Pane(s)" and specify the Batch1 panel, then add a fade animation (set to occur over 500ms by default).

We also want to set the Image Strip to its default state, so with the case editor still open, choose "Set Panel(s) to State(s)" and specify the Image Strip panel and Default State.

Generate a prototype and try it out.  When you drag and drop the first image thumbnail onto the Image Strip, the image will fade out and change the Image Strip back to its Default State.

This zip file contains the RP file needed to complete this tutorial

Step 1: Convert image to dynamic panel

Step 2: Add OnDrag case to "Move with drag"

Step 3: Add OnDragStart case

Step 4: Add condition to OnDragDrop, Case 1

Step 5: Hide image from the batch

Step 6: Set Image Strip back to default state

Step 7: Add second condition to OnDragDrop

Step 8: Set Image Strip back to default state

Back to Dynamic Panels (Advanced)