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.
"How did you do that?"
Dynamic Panels (Advanced)
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.
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.
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 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
"with drag x": Moves the panel with the cursor in only the horizontal
"with drag y": Moves the panel with the cursor in only the vertical
"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.
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
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.
Dynamic Panel Events Overview
OnShow & OnHide Events
Drag and Drop Events
Using 'Move Panel' with OnDrag
Using Conditions with Drag & Drop
Dynamic Panel Tutorials
Drag and Drop Images