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.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

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.

--

--

--

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

Love podcasts or audiobooks? Learn on the go with our new app.

How to Setup an Ad Blocking WireGuard VPN Server with PiHole in the Cloud for Free

Read an Excel file using Apache POI

Messing around with Perkeep (part 1)

How to login to RESTFull APIs WSO2 API Manager 3.0.0

Types as tests: How to fail the build when there’s a logical error

What Are Inheritance, Encapsulation, Polymorphism, and Abstraction in Object-Oriented Programming?

Here’s how you can add promotional item to order in Oracle ERP Cloud

Automatically convert HTML pages (content-based) to AMP

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Well Joe

Well Joe

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

More from Medium

Axure Tutorial: Digital Input Box and Step Size Settings

Implementing Integrated-Logistics Apps for Krealogi

Daydream: next-gen camera

Rapid Design Thinking: How would you design an ATM for childern.