撰写在本教程中，你将学习如何使用动态面板元件制作一个可以拖动的滑块控件。【原型预览】
1、元件设置
- 打开一个新的RP文件，在画布中打开Page 1。
- 从元件面板中拖拽一个水平线元件到画布中，设置它的宽度为400，线段宽度为5。
- 拖拽一个圆形元件到画布中，设置它的高度和宽度均为25。
- 选中水平线和圆形，点击界面顶部工具栏中的居中对齐图标，然后在点击中部对齐图标。
- 在圆形上点击鼠标右键，在弹出的右键菜单中选择转换为动态面板。
注意：动态面板是唯一具有拖动事件的元件，所以任何你想拖动的元素，都要放入动态面板中。
2、使用动态面板的拖动时事件来移动它
- 选中动态面板，点击交互面板中的新建交互。
- 在弹出的列表中选择拖动时事件，然后选择移动动作。
- 在目标下拉列表中选择当前元件。
- 在移动下拉列表中选择跟随水平移动。这样在Web浏览器中，动态面板就可以跟随你的鼠标拖动，在水平方向上移动。
- 先不要关闭这个动作。
3、给移动动作添加边界
注意：你可以在此了解移动边界的原理：移动动作边界。
- 点击移动动作底部的更多选项。
- 在边界下，点击添加界限。
左边界
- 在出现的新的边界行中，在第一个下拉列表中选择左侧。（这是指动态面板左边缘的X坐标值。）
- 在中间的下拉列表中，选择大于等于（>=）。
- 点击第三个字段右侧的fx图标以打开编辑值对话框。
- 在对话框底部，点击添加局部变量。
- 在局部变量行的第一个字段中，设置变量名称为“LineWidget”，在第二个字段中，选择元件，在第三个字段中，选择线段元件。（这个局部变量就代表了这个线段的整体。）
- 在对话框上面的文本框中，输入：[[LineWidget.left]]。（这个表达式代表了线段元件左边缘的X坐标值。）
- 点击确定按钮关闭编辑值对话框。
我们刚刚添加的边界，左侧 >= [[LineWidget.left]]，意味着动态面板的左边缘，只能移动到大于或等于线段元件左边缘X坐标值的地方。换句话说，就是它不能移动到超出线段元件左边缘的位置。
右边界
- 再次点击添加界限，在出现的新的边界行中，在第一个下拉列表中选择右侧。（这是指动态面板右边缘的X坐标值。）
- 在中间的下拉列表中，选择小于等于（<=）。
- 点击第三个字段右侧的fx图标以打开编辑值对话框。
- 在对话框的底部，点击添加局部变量。
- 在局部变量行的第一个字段中，设置变量名称为“LineWidget”，在第二个字段中，选择元件，在第三个字段中，选择线段元件。（这个局部变量就代表了这个线段整体。）
- 在对话框上面的文本框中，输入：[[LineWidget.right]]。（这个表达式代表了线段元件右边缘的X坐标值）
- 点击确定按钮关闭编辑值对话框。
我们刚刚添加的边界，右侧 <= [[LineWidget.right]]，意味着动态面板的右边缘，只能移动到小于或等于线段元件右边缘X坐标值的地方。换句话说，就是它不能移动到超出线段元件右边缘的位置。
4、预览交互
预览页面，左右拖动小圆圈，它就会沿着线段元件移动，但是你不能将它拖动到超出线段元件左边界或右边界的位置。
附加信息和提示
纵向滑块【原型预览】
创建一个纵向滑块，按照上面的步骤进行操作即可，但是有些地方需要作出调整。
- 用垂直线代替水平线
- 在移动动作下的移动下拉列表中，选择跟随垂直拖动。这样在Web浏览器中，动态面板就可以跟随你的鼠标拖动，在垂直方向上移动。
- 移动的边界设置为：
顶部 >= [[LineWidget.top]]
底部 <= [[LineWdiget.bottom]]
