本次是实现拖动圆形元件，拖到不同位置显示音量不同大小，当到达最左边时显示音量关闭的效果，具体的效果如下图所示：

效果图

通过思考，圆形元件拖动只能在水平线上拖动，且有左右限制；喇叭及对应刻度是根据水平线上的圆形元件进行控制显示隐藏。

制作的时候先把需要的元件拖动到界面上，把水平线命名为“水平”，把音量刻度从左到右分别命名为“1、2、3、4、5、6”，圆形元件命名为“圆”

所有元件摆放

先实现“圆”在水平上移动，且左右限制，因为需要限制，那么就需要在页面加载的时候定义两个全局变量，选中“水平”，属性中双击“加载时”进入设置

定义了两个全局变量：left、right。left是元件“水平”的x值，所有用“[[This.x]]”，right为元件“水平”的x值加上它的宽，即“[[This.x+This.width]]”

设置好着两个值就可以来控制“圆”的左右边界

为了能移动圆，那么把圆设置成动态面板，面板名称“圆”；属性中双击“拖动时”进入设置“圆”的移动范围，通过添加边界值，左侧大于等于全局变量“[[left]]”，右侧小于等于全局变量“[[right]]”

因为在区间范围的时候，需要隐藏红色X号，所以需要需要设置隐藏红色X

那么红色X需要在什么时候显示呢？需要在“圆”拖到最左边的时候显示，通过设置“if "[[This.x+This.width]]" == 值于 left”的时候显示红色X

此时设置拖动“圆”就可以在“水平”范围内拖动，且到最左边的时候显示红色X，离开最左边的时候隐藏红色X设置完成

接下来设置拖动到不同位置显示音量刻度

我的想法是先记录下每个刻度对应的x值，那么就在界面加载的时候设置好每个刻度的x值，通过新增全局变量“left1-left6”

当拖动“圆”是，“圆”的右侧"[[This.x+This.width]]" >="left1"时显示刻度1，"[[This.x+This.width]]"

"[[This.x+This.width]]" >="left2"时显示刻度2，"[[This.x+This.width]]"

"[[This.x+This.width]]" >="left3"时显示刻度3，"[[This.x+This.width]]"

"[[This.x+This.width]]" >="left4"时显示刻度4，"[[This.x+This.width]]"

"[[This.x+This.width]]" >="left5"时显示刻度5，"[[This.x+This.width]]"

"[[This.x+This.width]]" >="left6"时显示刻度6，"[[This.x+This.width]]"

设置好后如图所示

到此，所有设置完成，进行预览就能达到文章开头的效果。

欢迎大家批评建议，谢谢大家