DRAG & DROP INTERFACE
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.
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
Step 1: Convert
image to dynamic panel
Step 2: Add OnDrag
case to "Move with drag"
Step 3: Add
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
Drag & Drop Image Interactions
MORE DYNAMIC PANELS (ADVANCED) ARTICLES ::
This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.