axure怎么设置拖动效果

1、将要拖动的组件转成动态面板

2、在动态面板属性中选择OnDrag（拖动）

3、在事件中选择Move Panel,即移动动态面板

4、勾选该动态面板即可

本文章主要是为需要的人提供教程以及为自我学习的一种复盘方式。

1.从元件库中拖入一个手机模板。

2.在导航栏和标签栏之间拖入一个动态面板，并将面板名称命名为：外层动态面板。

3.双击 【外层动态面板】，将state1改为：state1-外层动态面板，并双击进入  state1-外层动态面板里面

4.在【 state1外层动态面板】里，拖入一个动态面板，并命名为：内层动态面板。 内层动态面板的长度为所要展示的内容的长度。

5.同理，双击【内层动态面板】后，将state1命名为：state1-内层动态面板，并双击进入【state1-内层动态面板】里面。并拖入自己要展示的内容

6.返回至主页面，单击【外层动态面板】，给它添加“拖动时”用例

7.双击“拖动时”后，点击“移动”，要移动的元件选择【内层动态面板】，移动选为：垂直移动

8.点击“添加边界”，添加2个边界：（1）顶部<=0（2）顶部>=0。当顶部>=0时，需要为其添加函数，点击>=0时的 fx

9.设置变量，点击“添加局部变量”，panel1=元件 外层动态面板；panel2=元件 内层动态面板。panel1，panel2可按自己喜好命名

10.设置函数,设置函数为：[[panel1.height-panel2.height]]  。设置完成后，按f5预览，如果不能实现效果，请务必检查每一个变量名和函数（特别易错，我错了三次）。

注：本教程参考： 阿阿小兰兰  发布的（Axure之上下滑动屏幕实现，原文网址 https://www.jianshu.com/p/dd44f5229c32 。ps：阿阿小兰兰写得特别清楚，从她的教程中本人受益良多）

首先创建所需要的元器件：（括号里注明元器件的坐标与大小）

元器件取名如下：

1.头部菜单 （矩形 x:0y:0w:260 h:35）

2.内容 （动态面板 x:0y:39 w:278 h:369）

3.底部菜单 （矩形 x:0y:370 w:260 h:35)

其实对括号里的属性是不强制规定的，但刚开始，建议可以先跟以上数据进行设置。

在第一步的“内容”动态面板中再一个动态面板

1.拖动面板 （动态面板 x:0 y:0 w:260 y:673）

在拖动面板中放入你要显示的屏幕内容，这个随便放几张图片就好。懒得画图，这里我就放几个矩形了

选择“内容”动动态面板，设置以下交互事件

1.拖动动态面板时 ，添加交互事件如图所示：

注意，是选中“内容”面板 ， 拖动的是“拖动面板”面板

再次选择“内容”动动态面板，设置以下交互事件

1.结束拖放动态面板时，添加交互事件如图所示：

再次选择“内容”动动态面板，设置以下交互事件

1.结束拖放动态面板时，添加交互事件如图所示：

---