使用Axure实现控件拖拽的上下排序
在网页设计中，控件拖拽的上下排序应用非常广泛。最近，在网上看到了一个类似的案例，通过中继器来实现拖拽排序，但是这种方法只能往上拖拽排序，无法往下排序。经过一番思考，我发现了一个不错的方式可以分享给大家，希望能起到抛砖引玉的作用。
实现效果
先来看一下实现效果：
1. 看似复杂的效果，实际上实现起来非常简单。
2. 主要应用方式是通过鼠标拖拽控件移动，并判断控件所在位置。
Axure制作：鼠标拖拽控件移动-动态面板方式
下面是具体的步骤：
1. 新建一个矩形并命名为“background”，设置尺寸为450*450（大小可以随意），隐藏并锁定位置（105, 20）。
2. 再创建一个矩形，将其内容设置为“组件1”，填充色为#CCCCCC，尺寸为240*75，并将其转为动态面板，命名为“Module1”，设置尺寸为240*80。
3. 复制三份“Module1”并分别命名为“Module2”、“Module3”和“Module4”，修改其内容为“组件2”、“组件3”和“组件4”，并设置填充色。
4. 将“Module1”、“Module2”、“Module3”和“Module4”垂直排列，组件之间无间隙（间隙预留在动态面板state1中）。
交互设置
接下来是交互的设置步骤，其中只介绍了“Module1”的交互设置，其他组件的设置与之相同。
1. 在“Module1”的拖动开始时添加一个Case1用例：
- 隐藏“Module1”
- 拉动元件：下方
- 动画：线性
- 时间：100毫秒
- 显示“Module1”并置于顶层
2. 在“Module1”的拖动时添加一个Case1用例：
- 垂直拖动“Module1”
- 移动：垂直拖动
- 设置界限
3. 将“元件：background”设置为局部变量LVAR1，界限的顶部大于等于[[]]，底部小于[[]]。
4. 在“Module1”的拖动结束时的交互设置比较复杂，主要是判断组件的位置。这里只设置了4个组件的移动，临界点分别为（200, 140），（200, 220），（200, 300）。
- Case1判定条件：值：[[This.y this.height/2]]小于等于140
- 动作：
- 移动当前组件到（200, 100）
- 隐藏当前组件
- 显示当前组件并推动元件：下方
- Case2判定条件：值：[[This.y this.height/2]]小于等于220且值：[[This.y this.height/2]]大于140
- 动作：
- 移动当前组件到（200, 180）
- 隐藏当前组件
- 显示当前组件并推动元件：下方
- Case3判定条件：值：[[This.y this.height/2]]小于等于300且值：[[This.y this.height/2]]大于220
- 动作：
- 移动当前组件到（200, 260）
- 隐藏当前组件
- 显示当前组件并推动元件：下方
- Case4判定条件：值：[[This.y this.height/2]]大于300
- 动作：
- 移动当前组件到（200, 340）
- 隐藏当前组件
- 显示当前组件并推动元件：下方
优化处理
以上仅是快速实现效果的原始案例，针对临界点，可以进行进一步的优化处理。希望本篇文章能对你有所帮助，如果觉得不错，请投个票并加个赞哦！
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
