DYNAMIC PANELS (ADVANCED)

Move, Drag & Drop, and Animate

Now you know the ins and outs of dynamic panels. Your prototypes will never be the same.

This tutorial shows us how to nest dynamic panels and create a window for panning a map, similar to what you would find on Google Maps.

 

Go to Draggable Map Tutorial

The OnDragStart, OnDrag, and OnDragDrop events let you add interactions at each stage of a drag and drop. When you want a widget or group of widgets to be draggable, place them in a dynamic panel.

The OnPanelStateChange event is triggered when a dynamic panel state is set using the “Set Panel State” action.

 

This event is often used to trigger a chain of interactions initiated by a state change.

There are several events specific to

dynamic panels: OnPanelStateChange, OnDragStart, OnDrag, OnDragDrop, OnSwipeLeft/Right/Up/Down, and OnLoad.

 

Some of these events are triggered by actions that you create, like showing or moving a dynamic panel. You can use these events to create patterns like stacked expanding and collapsing regions and rotating banners.

 

Using the drag events you can prototype drag and drop interactions and show what happens when the drag starts, during the drag, and when the drag completes.

 

Features

Learn

Community

Company

Buy

Download

AxShare

Forum

Manage Licenses

Blog

In many cases, you'll use the "Move Panel" action in the OnDrag event to drag objects across the page.

 

In addition to the "to" and "by" options for the Move Panel action, there are four more options for dragging.

 

"with drag": Moves the panel with the cursor. This is the most commonly used.

 

"with drag x": Moves the panel with the cursor in only the horizontal direction.

 

"with drag y": Moves the panel with the cursor in only the vertical direction.

 

"to x,y before drag": Moves the panel back to the position it was in before the drag started.

This is useful on the drag drop.

 

There are two condition values meant specifically for use with the drag and drop events:

 

Drag Cursor: The location of the cursor during a drag.

 

Area of Widget: The rectangular area that a widget takes up.

 

When used with the comparators "Is Over",

"Is Not Over", "Enters", and "Leaves", you can respond to the cursor entering or leaving a widget's area during the drag or to a widget being dropped on top of another widget.

 

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

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

u80_start u80_end u80_line

Patents

This tutorial shows us how to drag and drop an image to remove it from a batch (similar to the Flickr organizer) using the dynamic panel events OnDragStart, OnDrag and OnDragDrop.

 

Go to Drag and Drop Images Tutorial

DYNAMIC PANEL EVENTS OVERVIEW

OnPanelStateChange

DRAG AND DROP EVENTS

Using 'Move Panel'

with OnDrag

Using Conditions

with Drag & Drop

Dynamic Panel Tutorials

Draggable Map

Drag and Drop Images

The OnSwipe actions are triggered when a dynamic panel is "swiped", or quickly clicked, dragged, and released.

 

This event is common for mobile slideshows and navigating apps prototypes. It is commonly used with the action "Set Panel State" with Previous or Next panels states.

OnSwipe

The OnScroll event is triggered when a dynamic panel with scrollbars is scrolled.

 

To trigger an interaction at a specific scroll location, you can add a condition with [[this.ScrollX]] and [[this.ScrollY]]

 

For example: If [[this.ScrollY]] is greater than 200, then hide a chosen widget.

OnScroll

The OnResize event is triggered when a dynamic panel is resized using the "Set Panel Size" action.

 

This can be used for triggering a chain of events when the "Set Panel Size" action is used on another widget.

 

OnResize

The OnLoad event is triggered when a page if initially loaded.

 

This can be used as a replacement for the OnPageLoad interaction, allowing for widgets to be shared across projects or pages without changing any interactions.

OnLoad

This tutorial shows us how to use the OnPageLoad event to initiate an auto-rotating banner.

 

Go to Auto-Rotating Banner Tutorial

Auto-Rotating Banner

u165_start u165_end u165_line
u167_start u167_end u167_line
u169_start u169_end u169_line
u171_start u171_end u171_line
u173_start u173_end u173_line
u175_start u175_end u175_line

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

THE ROUND UP

u189_start u189_end u189_line
u191_start u191_end u191_line
u193_start u193_end u193_line

OnDragStart: Occurs when the drag begins.

OnDrag: Occurs as the panel is dragged.

OnDragDrop: Occurs when the panel is dropped.

u202_start u202_end u202_line

MORE DYNAMIC PANELS OVERVIEW ARTICLES ::