axure向左拖动结束时(axure交互如何按顺序显示)

编辑导语：排序是表格应用中常用的工具。本文作者分享了表格拖动排序的相关方法，并介绍了其原理、素材准备以及交互设置的具体流程。让我们一起来学习吧。
它是排序表中常见的交互。一般常用升序和降序。如果你想随心所欲的设置自定义表格，并根据自己的喜好进行调整，那就是拖动和排序。通常，它在自定义表中很常见。所以今天笔者就教大家如何让鼠标拖动表格中的一行或一列，移动到表格中相应的位置。
预览地址：https://y3av3g.axshare.com/#g=1
那我们一起开始做吧。
1.主要用于原理介绍的交互，其实就是repeater的排序事件。根据repeater表中的序号，拖动后通过更新行的操作更新列表中对应行的序号，从而实现拖动排序的效果。
例如，列表中第一、第二和第三行的序号分别是1、2和3。如果将第一行拖到底部，它们的序号将变成3、1和2，因为排序事件在拖动后会到底部。
当然这里需要一些计算公式，比如计算距离，拖多远，去哪里，序号的加减。我们将在下面详细解释这种交互。
二。材料准备主要材料是中继器、动态面板和矩形元素。
1.设置表头实际上就是把多个矩形拼在一起，你需要几列才能拼成几个矩形。可以根据自己的需要设置样式，如下图所示：
2.中继器的内部组件。复读机中的主要部件也是用多个长方形拼在一起的。这里的宽度应该和上面的表头一样，一一对应。如果需要在高亮效果中移动，我们还可以添加一个背景矩形来设置在移动时改变颜色的交互样式。如果想做斑马线交互效果，还可以在repeater风格中设置背景色交替。
在组件准备好之后，我们必须选择repeater中的所有组件，然后右键单击它们，将它们变成动态面板，因为只有动态面板可以拖动。
3.复读表复读表主要分为两种列，排序列和内容列。
列是no，默认顺序是1234567。它不用于显示，仅用于逻辑交互。
列是1 ~ 6列，对应表格元素的内容。
4.这里的其他元素主要是指文本标签，只用于逻辑记录，默认情况下是隐藏的。
3.互动设置1。当加载repeater的每一项时，这里我们只需要将repeater表中1~6列的内容设置为repeater中对应的矩形即可。这用于设置文本的交互。
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-当前序列
这样就修正了真正需要移动的网格数。接下来，我们需要根据他是向上移动还是向下移动来编写交互。这里，如果记录的移动细胞数为正，则向下移动，如果为负，则向上移动。
我们先讨论下移的情况：
这里，我们使用更新行的交互来更新相应行的序列号。有了新的对象(条件)，移动行的序号和移动网格数大于等于目标行，目标行大于等于当前行。
例如，移动的行是第三行，移动了两个方块。移动行数大于等于目标行的结果为5，目标行大于等于当前行，即大于3。
3大于等于5的网格是第四排第五段。需要改变的其实是45的网格。我们把他的序列号更新一下，改成3和4，也就是原来的序列号-1。
另外，我们还要更新当前行，将其序号更新到当前序号移动到的网格，即3 ^ 2=5，这样就完成了向下移动。
然后讨论向上移动的情况：
其实原理是一样的。第一，更新目标行号=移动行号，移动行号中的移动单元格个数大于移动行号。
例如，如果第三行向上移动2个方块，更新的行实际上是第一行和第二行。它们的序号可以从原来的1和2更新到2和3，也就是原来的序号1。
另外我们还要更新当前行，也就是移动行，将其序号更新为当前序号——移动网格，也就是3-2=1，这样就完成了向上移动。
4.其他互动其他互动可以是美化的互动。例如，如果你想显示移动的效果，我们可以在repeater外面添加一个动态面板。当动态面板在repeater内部移动的时候，也就是鼠标拖动某一行内容的时候，我们可以利用移动交互让外部的动态面板跟随鼠标。
因为我们在这里拖动的是线，所以移动的时候选择用鼠标垂直移动。
当然，我们还需要使用根据不同行设置文本的交互来传递表格内容，还需要使用移动的交互来将动态面板移动到拖动开始时对应行的位置。
这些都是美化效果，没有必要，这里就不展开了。
另外，如果是拖动列，选择水平移动，如下图所示。
其实原理是一样的。只需转置表格，将所有垂直交互改为水平交互。
做好之后，当我们再次使用时，只需要在repeater表单中填入选项，就可以自动生成交互效果。方便吗？
本期就到这里。感谢您的阅读。下次见~
作者：做产品而不是管理者；微信：Axure高保真样机；
本文由@做产品不做经理原创发布。大家都是产品经理，未经作者允许，禁止转载。
题目来自Unsplash，基于CC0协议。