Axure Tutorial: Draggable Items Transfer

Introduction

With the popularity of touch screens, users' action habits have changed from click / tab to drag and drop. Today, let's learn how to make a transfer for dragging items.

Features to be Realized

1.Drag the item on the left of transfer to the right or drag the item on the right to the left.

2. When the dragged item touches the box on the left or right, the contact effect is shown. When the drag dropped, if the dragged item touches the box, the dragged item enters the box. If the box is not touched, the item returns to its original position.

How to Realize these Features

1. Create a draggable item as a dynamic panel and then as a repeater.

2. When dragging an item on the left or right, if the item touches the box on the right or left, set the style change of the box. At the end of dragging, if the item touches the box on the right or left, add or delete the corresponding row in the two repeaters; If not, return to the original position.

Preview the completed prototype for this tutorial

Widgets Setup 

The transfer is divided into selectable items column and selected column. The components in the transfer on both sides are the same, so we will describe with the left column.

Widgets include: repeater and background box.

1. Repeater: the internal rectangle is turned into a dynamic panel, because only the dynamic panel can be dragged in Axure, and then the item border needs to be set to 0. The selected style border color is orange, border line is 2. The error style fill color of  items is grey.

Fill in the default column1 of the repeater with the data as shown in the image above.

2. Background box: made of rectangle, set the border color and error style, and put it under the repeater.

3. Copy the contents of the left column to the right and delete all repeater data.

Interactions Setup 

When each item of the repeater on the right is loaded, if the number of visible items is less than 1, the repeater will be hidden; If not, the repeater is shown.

When the item is dragged, the item move with the mouse, bring it to top, and selects the item.

When drag dropped, if the item touches the column on the right, change its selected state to false, and add a new row to the repeater on the right. The value of the new row is the same as the name of the item. Delete corresponding row on the left. Set the background box on the right to the error state. If the item does not touch the repeaater on the right, change its selected state to false and return to its original position.

When moved, if the item touches the right repeater, the box on the right will be changed to the error state. If not, the error state will be set to false。

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.