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.

          OnDragStart: Occurs when the drag begins.

          OnDrag: Occurs as the panel is dragged.

          OnDragDrop: Occurs when the panel is dropped.

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

This can be used for controls like rotating banners, where you want to continuously rotate through states. The banner would be a dynamic panel with multiple states. An action to set the panel state starts the cycle (possibly from the OnPageLoad) and the rest is handled within the OnPanelStateChange event. Using conditions to check the current state of the panel, you can set the panel to the next state after waiting for a second. And each time you set the state, it triggers the event again.

This tutorial shows us how to use dynamic panels and the OnClick, OnMove, OnHide, and OnShow events to expand and collapse sections in an accordion control.

Go to Accordion Control Tutorial

There are seven events specific to the Dynamic Panel: OnMove, OnShow, OnHide, OnPanelStateChange, OnDragStart, OnDrag, and OnDragDrop.

Some of these events are triggered by actions that you create like showing or moving a dynamic panel.  And 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.

The Dynamic Panel widget is a powerful tool for demonstrating interactions and functionality. In this article, learn how to use the dynamic panel widget to move, drag and drop, and animate content.

The OnMove event is triggered when a dynamic panel is moved with the “Move Panel” action.

If you add a case in the OnMove event with a "Move Panel" action, there is the additional option in the action to move “with this”. The OnMove event allows you to “chain” moving panels together. For example, if you have  three dynamic panels with the following actions in their OnMove events:

          Panel 1: OnMove, Move Panel 2 with this

          Panel 2: OnMove, Move Panel 3 with this

Moving Panel 1 moves all three panels by the same amount.

The OnShow and OnHide events are triggered when a dynamic panel is shown or hidden using the “Show Panel”, “Hide Panel” or “Toggle Visibility” actions.

When building an expanding and collapsing region, clicking a header might toggle the visibility of a dynamic panel. Then, the OnShow and OnHide of that panel can manage moving content below the panel down and up with the Move Panel action.

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.

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

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

The Round Up

Choose a video:

This tutorial shows us how to use dynamic panels and the "Set Panel State(s) to State(s)" action to create a Photo Carousel.

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

"How did you do that?"

Dynamic Panels (Advanced)

Dynamic Panel Events Overview

OnMove Event

OnShow & OnHide Events

OnPanelStateChange Event

Drag and Drop Events

Using 'Move Panel' with OnDrag

Using Conditions with Drag & Drop

Dynamic Panel Tutorials

Accordion Control

Photo Carousel

Draggable Map

Drag and Drop Images

Expand & Collapse

Drag & Drop

Go to Photo Carousel Tutorial (Version 6.0)

Go to Photo Carousel Tutorial (Version 6.5+)