This tutorial shows us how to create draggable content inside a window similar to how you would navigate Google Maps using nested dynamic panels and the OnDrag event.

Dynamic Panel Tutorial

Draggable Map

"Windowing" Content

On the MapContent panel, add a case to the OnDrag event. From the list of actions, choose "Move Panel" and specify the MapContent panel. By default, it'll set this action to move the panel with the drag. Click OK to close the Case Editor.

Go back to the "Draggable Map" page. Select the "Reset Map" link, and add an OnClick case with the action to "Move MapContent to (-530, -135.)", which is approximately its original position.

...And that's it! Generate a prototype and try it out.

Creating a draggable map is not such a drag, after all!  You can use the same technique to create other draggable content while staying within a specified area.

First, open DraggableMap.rp and open the "Draggable Map" page.

Since we don't want the entire map to show on our screen, we're going to create something like a "window" that gives us a view of just a portion of the map. To do this, select the image of Google Maps in the wireframe, right-click and choose Convert > Convert to Dynamic Panel.

Label this panel "MapWindow".

Next, reposition the MapWindow panel on top of the white rectangle. Using the handles, resize the panel so that it fits inside the rectangle (it'll look like the above image).

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

(AxureDraggableMap.zip)

We want the red map marker in the image to be in the middle of our map view, so let's reposition the map inside the MapWindow panel state.

Open up State1 of the MapWindow panel. Reposition the map upwards and to the right so that the red marker is approximately in the middle of the dynamic panel. Part of the map will be off the grid, but that's OK.

Go back to the "Draggable Map" page and check to see that the marker is where you want it to be.

Now that we've created our "window" for the map, we want to make the map draggable. To do this, we'll convert the map image to its own dynamic panel. Open up State1 of the MapWindow panel again, right-click on the image and choose Convert > Convert to Dynamic Panel to create another dynamic panel.

Label this panel "MapContent". You'll notice that this dynamic panel is now nested within the MapWindow panel.

This zip file contains the RP file needed to complete this tutorial

Step 1: Create dynamic panel for the "window"

Step 2: Resize MapWindow panel

Step 3: Reposition map inside the panel state

Step 4: Convert map to a dynamic panel

Step 5: Add move panel action with drag

Step 6: Add interaction to reset the map

Next: Drag & Drop Images Tutorial

Back to Dynamic Panels (Advanced)