Axure Advanced Tutorial: Drag Table Items to Automatically Sort
Introduction
Sorting is a common interaction in tables. Generally, ascending and descending order are commonly used. If you want to set a custom table as you like, and adjust it according to your own preferences, you can sort it by dragging, which is generally more common in custom tables. So today I will teach you how to make a row or a column in the table dragged by the mouse and move to the corresponding position in the table.
1. Principle
The main interaction is actually the sorting event of the repeater, which is arranged according to the ID number in the repeater table. After dragging, the ID number of the corresponding row in the list is edited so that the drag sorting can be realized.
For example, the ID numbers of the first row, the second row, and the third row in the list are 1, 2, and 3, respectively. If you drag the first row to the lowest position, their ID numbers will become 3, 1, and 2.
If you add an ascending sort by ID number to the table, they will be sorted by the dragged ID number.
Of course, some calculation formulas are needed here, such as calculating distance, how far to drag, where to go, and the addition and subtraction of ID numbers. I will explain in detail when I explain the interaction below.
Widgets Setup
The main materials are repeaters, dynamic panels, rectangles.
1. Table header
The header is actually a combination of multiple rectangles, and only a few rectangles are needed for a few columns. You can set the style according to your own needs, as shown in the following figure:
2. Repeater internal widgets
The main widgets in the repeater are also combined with multiple rectangles, and the width here should be the same as the header above, one-to-one correspondence. If we need to move in the highlight effect, we can also add a background rectangle and set the interactive style of mouseOver, Selected and mouse Down. If you want to make a zebra crossing effect, you can also set the background color alternation in the repeater style.
After the widgets are ready, we need to select all the widgets in the repeater, right-click to change to the dynamic panel, because only the dynamic panel can be dragged.
3. Repeater table
Interactions Setup
1. When the repeater is loaded
When repeater loaded, we add a sort to repeater, so that the repeaters are arranged in the ascending order of the ID column, so that after the subsequent movement updates the ID number, it can be automatically sorted.
2. When the dynamic panel is dragged
When the dynamic panel is dragged, you need to set it to move with drag Y, set the background rectangle to be selected, and bring the dynamic panel to Top
3. When the dynamic panel dragging dropped
This is when the mouse is released, that is, the drag is over.
(1) First, we need to calculate the extreme case (If):
if the dragged item TotalDragY exceeds the last item, the dragged item and the last item will change their positions. We do this by changing the ID number.
As shown in the figure below, if the dragged item exceeds the blue area, all items whose ID number is greater than or equal to the ID number of the current item are -1, and the ID number of the dragged item will be changed to the ID number of the last item.
Then set the ID number of the current item to the ID number of the last item.
(2) Then set the second extreme case (First Else If):
The TotalDragY of the dragged item is less than half the height of the current item, then return to the original position.
As shown in the figure below, take dragging the first item as an example, if the TotalDragY of the dragged first item is less than half of the height of the current item, it will return to the original position. Note that the same is true when TotalDragY is negative.
(3) The remaining case (Second Else If)
As shown in the following image, When dragging an item, the ID number of the dragged item and the IDs of all items greater than the dragged item ID number and less than the target item ID number will be changed according to TotalDragY.
Finally, add an if case to set the rectangle background unselected.
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 technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment