Skip to main content

Drag and drop tutorial

In this tutorial, you'll learn how to make widgets draggable. You'll also learn how to execute actions when a widget is dropped after being dragged.

info

Click here to download the completed RP file for this tutorial.

1. Widget setup​

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a placeholder widget onto the canvas.

  3. Right-click the placeholder and select Create Dynamic Panel in the context menu.

info

Dynamic panels are the only widgets with drag events, so any elements that you want to be draggable must be placed inside a dynamic panel.

2. Move the dynamic panel with its dragged event​

  1. Select the dynamic panel and click New interaction in the Interactions pane.

  2. Select the Dragged event in the list that appears, and then select the Move action.

  3. Select This widget in the Target dropdown.

  4. Leave With Drag selected in the Move dropdown, and click OK to save the action. This will make the dynamic panel move wherever the cursor goes as you drag it in the web browser.

3. Preview the interaction​

Preview the page and drag the placeholder around.

4. Move the dynamic panel back to its starting position when dropped​

  1. Back in Axure RP, select the dynamic panel and click New interaction in the Interactions pane.

  2. Select the Drag dropped event in the list that appears, and then select the Move action.

  3. Select This widget in the Target dropdown.

  4. Leave To x,y Before Drag selected in the Move dropdown, and click OK to save the action. When you stop dragging the dynamic panel in the web browser, this will return it to its starting position.

5. Preview the interaction​

Preview the page again and drag the placeholder around. Notice that now when you drop it, it returns to its starting position.