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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

DRAG AND DROP

Make page elements draggable by using the dynamic panel widget. Trigger different actions at different parts of the drag by using the OnDragStart, OnDrag, and OnDragDrop events.

STEP 1: CONVERT IMAGES TO DYNAMIC PANELS

In the training document, open the page named "Drag and Drop". On the canvas are four image widgets and a recycle bin icon. We will be creating an interaction that allows users to delete the images by dragging and dropping them on top of the recycle bin icon.


Dynamic panels are the only widgets that have drag events, so we'll need to place each image widget into its own dynamic panel in order to make them draggable. To do this, right-click each of the image widgets in turn and select "Convert to Dynamic Panel" in the context menu.

STEP 6: PASTE DRAG CASES ONTO THE OTHER DYNAMIC PANELS

Because all of the actions above reference "This Widget", which refers to the widget whose event is firing, we can use the exact same cases for all four dynamic panel widgets. Rather than setting them up again for each of the others, though, we can copy and paste them.

STEP 7: PREVIEW

Preview the page and drag the images around in your web browser. Drop a few onto the recycle bin to hide them.

MORE RESOURCES

 

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 2: MOVE DYNAMIC PANEL AS IT'S DRAGGED

Select one of the new dynamic panels, and double-click "OnDrag" in the Properties tab of the Inspector to give it a new OnDrag case.


In the Case Editor, choose the "Move" action. Under "Configure actions", check "This Widget".


At the bottom of the right column, notice that the "Move" dropdown has been automatically set to "with drag". This will move the dynamic panel with the cursor as you drag it in the web browser.


Click "OK" to close the Case Editor.

 

STEP 3: BRING DYNAMIC PANEL TO FRONT WHEN THE DRAG STARTS

With the dynamic panel still selected, double-click "OnDragStart" in the Properties tab of the Inspector to give it a new OnDragStart case.


In the Case Editor, choose the "Bring to Front" action under "Bring to Front/Back". Under "Configure actions", check "This Widget". This will bring the dynamic panel to the front of the design in the web browser so that it always renders in front of other page elements as you drag it.


Click "OK" to close the Case Editor.

STEP 4: HIDE DYNAMIC PANEL WHEN DROPPED IF IT IS ON TOP OF RECYCLE BIN

With the dynamic panel still selected, double-click "OnDragDrop" in the Properties tab of the Inspector to give it a new OnDragDrop case.


At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.


Set the first dropdown to "area of widget" and the last dropdown to "Recycle Bin". This condition will evaluate to "true" when any part of the dynamic panel is directly on top of the "Recycle Bin" shape.


Click "OK" to close the Condition Builder.

In the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure actions", check "This Widget".


Click "OK" to close the Case Editor.

STEP 5: MOVE DYNAMIC PANEL BACK TO STARTING POSITION WHEN DROPPED ANYWHERE ELSE

With the dynamic panel still selected, double-click "OnDragDrop" again in the Properties tab of the Inspector to give it a second OnDragDrop case.


In the Case Editor, choose the "Move" action. Under "Configure actions", check "This Widget".


At the bottom of the right column, notice that the "Move" dropdown has been automatically set to "to x,y before drag". This will move the dynamic panel back to the coordinates it was at before being dragged.


Click "OK" to close the Case Editor.


Notice that even though we didn't set up a condition for this case, it shows the condition "Else If True". This case will fire if the first case's condition doesn't pass, i.e., when the dynamic panel is not on top of the "Recycle Bin" shape when it's dropped.

 

With the dynamic panel still selected, [CTRL]-click (Windows) / [CMD]-click (Mac) "OnDragStart", "OnDrag", and "OnDragDrop" in the Properties tab of the Inspector. Right-click the selection and choose "Copy" in the context menu to copy the cases under those events.


Then, right-click one of the other dynamic panel widgets and select "Paste". This will paste the copied cases under that widget's OnDragStart, OnDrag, and OnDragDrop events.


Paste the cases onto the other two dynamic panel widgets as well so that all four have the same drag cases.

TRY IT!