Axure表格怎么拖动并自由排序？

如题所述

推荐答案 2023-06-28

排序是表中常见的一种交互方式，一般采用的是升序和降序，如果要设置自定义表，可以根据自己的喜好，是拖拽排序，一般在自定义表中比较常见。那么，在Axure里，应该怎么进行格拖动并自由排序？不会的小伙伴就可以跟着下面的分享学习起来！对于不同阶段的Axure学习需求伙伴，为大家提供了多套Axure自学视频课，包括原型图基础入门、APP购物车交互教程、支付宝APP交互教程、APP列表页切换教程、移动登录交互教程等可以全方位的为小伙伴们提供基础的功能学习以及上手实操，感兴趣的就去学习体验~

Axure表格拖动并自由排序方法：

一、原理介绍主要用到的交互其实就是中继器的排序事件，根据中继器表格里面的序号排列，拖动结束后，通过更新行的操作，更新列表中对应行的序号，这样就可以实现拖动排序的效果。

例如列表中的第一行、第二行、第三行的序号分别为1、2、3，如果拖动第一行到最下的位置，那么他们的序号就变成3、1、2，因为排序事件拖动后就会去到最下方。

当然了，这里还需要一些计算公式，例如计算距离，拖动多远，去到哪里，以及序号的加减问题。我们会在下面讲解交互的时候，详细说明。

二、材料准备主要材料是中继器、动态面板、矩形元件。

1.表格表头设置表头其实就是用多个矩形拼在一起，需要几列就几个矩形。样式根据自身需要设置即可摆放：

2.中继器内部元件中继器里主要的元件也是和多个多个矩形拼在一起，这里的宽度要和上面表头一样，一一对应。如果需要移入高亮的效果，我们也可以增加一个背景矩形，设置移入时变色的交互样式。如果要做斑马线交互效果，也可以在中继器样式中设置背景颜色交替。

元件准备好之后，我们要把中继器里所有元件选中，右键转为动态面板，因为只有动态面板才可以才可以拖动。

3.中继器表格中继器表格里主要分两种列，排序列和内容列。

排序列就是no，默认1234567顺序填写即可，不用于显示，只用于逻辑交互。

内容列就是column1~6，对应表格元件对应的内容。

4.其他元件这里主要是指文本标签，只用于逻辑记录，默认隐藏。

三、交互设置1.中继器每项加载时这里我们只需要把中继器表格里column1~6的内容，设置到中继器里面对应的矩形即可。这里用到设置文本的交互。

2.中继器载入时载入时，我们设置中继器排序，让中继器按照no列的升序排列，这样后续移动更新了序号后，就能自动排序了。

3.动态面板拖动结束时这里就是鼠标松开的时候，即拖动结束了。

这里我们首先要计算移动的距离，简单来说就是计算移动了多少格。这里我们主要用到TotalDragY函数，这个函数可以记录拖动的垂直距离，我们用TotalDragY除以表格里面一行的高度（其实就是矩形的高度），然后四舍五入，就可以得到他移动了多少格。

接下来我们就要分情况讨论了

1）当前序号（行数）+移动格子>中继器可以看到的总行数。例如中继器总共8行，你移动的是第三行，序号就是3了，移动了9格距离，加起来就是12,12大于8，相当于第三行移到了最后。那这时我们就要需改移动格数的记录文本了，他实际上移动的格数是中继器的中行数-他的序号，即8-3=5格，即他向下移动5格就到底了。

2）移动格子1-当前序号（行数）。例如当前移动的是第三行，，序号就是3了，向上移动了10格，就是-10，小于1-3=-2，简单来说就是移动到最上面的一行了。所以我们也是要修改移动格数的记录文本了，他实际上移动的格数1-当前序号（行数），即1-3=-2格。即他向上移动2格就到顶了。

这样就把真实需要移动的格数修正了，接下来我们还需要根据他是向上移动还是向下移动分别写交互。这里记录移动格数如果是正，就是向下移动，如果是负数，就是向上移动。

我们先来讨论向下移动的情形：

我们这里用更新行的交互，更新对应行的序号。跟新的对象（条件）是，移动行的序号+移动格子数大于等于目标行，并且目标行大于等于当前行。

例如移动行是第三行，移动了两格，移动行的序号+移动格子数大于等于目标行的结果为5，目标行大于等于当前行，即大于3。

大于3小于等于5的格子就是第四行和第五航，那需要改变的其实就是45两格。我们更新他的序号，把它变成3和4就可以，即原来的序号-1。

除此之外，我们还要更新当前行，将他的序号更新为，当前的序号+移动的格子，即3+2=5，这样向下移动就完成了。

然后再来讨论向上移动的情形：

其实原理都是一样的，首先更新目标行序号=移动行的序号，并且移动行序号+移动格数大于移动行序号。

例如移动的是第三行，向上移动了2格，那么更新的行其实就是第一行和第二行。他们的序号从原来的1、2更新成2、3接即可，即原来的序号+1。

除此之外，我们还要更新当前行，即移动的行，将他的序号更新为，当前的序号-移动的格子，即3-2=1，这样向上移动也完成了。

4.其他交互其他交互，可以是美化的交互，例如想把移动效果显示出来，那我们可以在中继器外部增加一个动态面板，在中继器里面动态面板移动时，即鼠标拖动某一行内容时，我们用移动的交互，让外面的动态面板跟随鼠标移动即可。