Axure 10 案例：拖动时自动排序的表格项

排序是表格中常见的一种交互方式。如果你想把自定义表格设置成你喜欢的样子，并根据自己的喜好进行调整，你可以通过拖动行来进行排序。那么今天我就教大家如何拖动表格中的某一行或某一列并移动到表格中的相应位置。

主要的交互方式实际上是中继器的排序事件，中继器的排序是根据中继器表中的ID号来安排的。拖动后，列表中对应行的ID号被编辑，这样就可以实现拖动排序。

例如，列表中第一行、第二行、第三行的ID号分别为1、2、3。如果你把第一行拖到最下面的位置，它们的ID号将分别变成3、1和2。

如果你在表中添加一个按ID号升序排序的功能，它们将按拖动的ID号排序。

当然，这里需要一些计算公式，比如计算距离，拖动多远，拖到哪里，以及ID号的加减。 我将在下面解释交互的时候详细说明。

主要材料是中继器、动态面板、矩形。

表头实际上是多个矩形的组合，只需要几个矩形。您可以根据自己的需要设置样式，如下图所示：

中继器中的主要元件也是由多个矩形组合而成，这里的宽度应该和上面的表头一样，一一对应。如果我们需要在高光效果中移动，也可以添加一个背景矩形，并设置鼠标经过、选中和鼠标按下的交互样式。如果你想做出斑马线的效果，你也可以在中继器样式中设置交替的背景颜色。

元件准备好后，我们需要选择中继器中的所有元件，右键单击，换成动态面板，因为只有动态面板可以拖动。

中继器表格的第一列的内容是ID，仅用于排序。将名称改为Number，其他列的内容应根据表格的内容来填入。

中继器载入时，我们给中继器添加一个排序，使中继器按照Number列的升序排列，这样在后续移动更新Number号后，就可以自动排序了。

拖动动态面板时，需要将其设置为随拖动Y轴移动，设置要选择的背景矩形，并将动态面板置于“顶部”

此时释放鼠标，即拖动结束。

(1) 首先，我们需要计算极端情况（If）。

如果被拖动的项目[[Item.Number+(TotalDragY/This.height).toFixed(0)]]超过最后一个项目，被拖动的项目和最后一个项目将改变其位置。我们通过改变Number号来做到这一点。

如下图所示，如果被拖动的项目超过了蓝色区域，所有Number号大于或等于当前项目的Number号的项目都是-1，被拖动的项目的Number号将被改变为最后一个项目的Number号。

然后将当前项目的Number号设置为最后一个项目的Number号。

(2) 然后设置第二个极端情况（Else If）。

被拖动项的TotalDragY小于当前项的一半高度，则返回原位。

如下图所示，以拖动第一个项目为例，如果被拖动的第一个项目的TotalDragY小于当前项目高度的一半，就会返回到原来的位置。请注意，当TotalDragY为负数时，情况也是如此。

(3) 剩下的情况（第二个Else If）

如下图所示，当拖动一个项目时，被拖动项目的ID号和所有大于被拖动项目ID号且小于目标项目Number号的项目的Number将根据TotalDragY改变。

这里编辑行数据的规则是：[[TargetItem.Number=Item.index]]，设置的值是：[[TargetItem.Number-1]]

当前行设置的值是：[[Item.Number+(TotalDragY/This.height).toFixed(0)]]

具体的意思大家可以自己去思考，在这里就不赘述了。重要的是要理解原理。

此外还需要编辑行数据，选择当前行，设置Number值为[[Item.Number+(TotalDragY/This.height).toFixed(0)]]，也就是改变当前拖动项目的Number值为拖动到的目标的Number值。

最后，添加一个if case来设置矩形背景未被选中。

这样一来，所有的设置都完成了。 如果你有任何问题和建议，请在下面留言。

Axure基础和原型设计课程/产品经理腾讯课堂 | 网易云课堂