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

 

Preview 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 AxureDragAndDropImages.rp and open the "Drag and Drop Images" page.

 

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

 

Label this panel "Batch1".

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

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure is a registered trademark of Axure Software Solutions Inc.

u25_start u25_end u25_line

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". 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" 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 State" 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.

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

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

THE ROUNDUP

DYNAMIC PANELS

Drag & Drop Image Interactions

u69_start u69_end u69_line
u71_start u71_end u71_line
u73_start u73_end u73_line
u75_start u75_end u75_line
u77_start u77_end u77_line
u79_start u79_end u79_line
u81_start u81_end u81_line

DOWNLOAD

u103_start u103_end u103_line

MORE DYNAMIC PANELS (ADVANCED) ARTICLES ::

u122_start u122_end u122_line
u123_start u123_end u123_line

u130_start u130_end u130_line

This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.