如何优化Axure设计：拖拽控件上下排序

在之前的一篇文章中，我们介绍了如何使用Axure设计一个拖拽控件上下排序的功能。但是，我们使用了一个临时解决方案——“绝对数值”，这种方法虽然可以快速实现，但是在实际应用过程中存在通用性不足等问题。因此，今天我们将为大家介绍一种更加优化的代码编写方式，使得我们的拖拽控件上下排序功能更加实用。

一、导入上一篇的控件

首先，我们需要导入上一篇文章中设计好的拖拽控件上下排序的控件，如果您还没有进行过设计，请参考以下链接：Axure设计：拖拽控件上下排序。

二、新建矩形并设置为隐藏

为了避免各控件的全局变量混乱，我们新建了一个名为“Label”的矩形，并将其设置为隐藏。您也可以设置一个全局变量，比如：X。习惯新建“文本标签”或“矩形”替代全局变量，以避免混淆。

三、调整布局

在此步骤中，我们需要进行以下操作：

- 设置”矩形：background”的大小为400*360；位置（118,80）。

- 设置”动态面板：组件1”的大小为240*80；位置（200,100）。即“矩形：background”的顶部和”动态面板：组件1”的顶部间隔为20；同理，“矩形：background”的底部和”动态面板：组件4”的底部间隔也为20。

四、修改“动态面板：组件1“代码

注意：其他“组件”的代码相同，只需要进行复制即可。

五、拖动开始时的Case1用例

在拖动开始时，我们需要完成以下操作：

- 隐藏”动态面板：组件1“；

- 拉动元件：下方；

- 动画：线性；

- 时间：100毫秒；

- 显示”动态面板：组件1“，并置于顶层；

- 设置不透明度：80%；

- 设置“矩形：Label”的值为：[[this.y]]。

隐藏”动态面板：组件1“时的拉动元件，可以不设置动画，设置动画及时间是为了有个“移动”的感觉，副作用就是相应的操作不能过快。

六、拖动时的Case1用例

在拖动时，我们需要完成以下操作：

- 垂直拖动“动态面板：组件1“；

- 移动：垂直拖动；

- 设置界限；

- 其中，设置“元件：background”为局部变量LVAR1；所以，界限的顶部大于等于[[]]，底部小于[[]]。

七、拖动结束时的Case1用例

在拖动结束时，我们需要完成以下操作：

- 设置不透明度：100%；

- Case2判定条件：“值：[[this.y]]大于[[LVAR1.y 20]]“且”值：[[this.y]]小于等于[[LVAR1.height-20]]“；

- 动作：移动当前元件到达指定（X，Y）；隐藏当前组件；显示当前组件；推动元件：下方；

- 其中，设置“元件文字：Label”为局部变量LVAR1；所以，X值为[[this.x]]，Y值为[[Math.ceil(TotalDragY/this.height)*this.height LVAR1]]。

八、Case3和Case4

- Case3判定条件：“值：[[this.y]]小于等于[[LVAR1.y 20]]“；

- 动作：移动当前元件到达指定（X，Y）；隐藏当前组件；显示当前组件；推动元件：下方；

- 其中，设置“元件：background”为局部变量LVAR1；所以，X值为[[this.x]]，Y值为[[LVAR1.y 20]]。

- Case4判定条件：“值：[[this.y]]大于[[LVAR1.height-20]]“；

- 动作：移动当前元件到达指定（X，Y）；隐藏当前组件；显示当前组件；推动元件：下方；

- 其中，设置“元件：background”为局部变量LVAR1；所以，X值为[[this.x]]，Y值为[[LVAR1.height-20]]。

九、复制代码

最后，我们只需要复制“动态面板：组件1“交互代码给其他“组件”，就能够实现整个拖拽控件上下排序的功能。

总结

本文为大家介绍了如何优化Axure设计中的拖拽控件上下排序的功能，使其更加实用。通过以上操作，我们可以避免在实际应用中出现通用性不足等问题。希望本文对您有所帮助。如果您觉得不错，也请投个票，点赞支持哦！