在案例14中，昆明网站建设小编制作了滑动开锁交互，但是当slider_dp向左/向右拖动时，它可以滑出 slider_bg（后面的背景图像）的边界，如图9，在这个案例中，使用条件约束解决这个问题。

这个问题出现在拖动slider_dp时，所以我们要在【拖动时】事件上寻找解决办法。

（图9）

第一步：在Axure设计区域同时选中slider_dp、open和slider_bg三个部件，单击右键将其转换为动态面板，并给其命名为slide_unlock。此时，slide_unlock动态面板是里面三个部件的容器，而包含其中的三个部件的坐标位置会发生变化。例如，将上述三个部件转换为动态面板之前，slider_dp的坐标是（726， 449），见图10。转换为动态面板之后的坐标是（17，12），见图11）。

第二步：双击slide_unlock动态面板，在弹出的【动态面板状态管理】中双击state1，进入状态1视图，选中slider_dp，在右侧的部件【属性】面板中双击【拖动时】事件，在弹出的【用例编辑器】中单击【添加条件】，在弹出的【条件编辑器】中点击左侧的下拉列表，选择【值】，见图12A。然后单击【fx】，见图12-B，在弹出的【编辑值】对话框中单击【添加局部变量】，并按图13所示操作，继续单击【插入变量或函数…】，在下拉列表中选择局部变量LVAR1，并将其修改为[[LVAR1.x]]，见图14。单击【确定】按钮回到【条件编辑器】，按图15所示操作。

（图10）

（图11）

（图12）

（图13）

（图14）

（图15）

通过条件描述可以看出，昆明网站制作小编认为此处条件的意思是，如果当前部件（也就是slider_dp动态面板）的x 坐标如果小于17，单击【确定】按钮关闭【条件编辑器】。现在条件设置完毕，继续在【用例编辑器】中新增【移动】动作，在右侧【配置动作】中勾选slider_dp动态面板，并设置其移动至“绝对”位置（x:17，y:13），见图 16。单击【确定】按钮关闭【用例编辑器】。

此时slider_dp部件的交互事件如图17所示，单击【预览】按钮后大家会发现，slider_dp图标向左拖动的问题依然存在。这是因为【拖动时】事件中包含多个用例，而多用例的条件逻辑执行顺序还存在问题，在后面章节中会对条件逻辑进行详细讲解。

第三步：右键单击【拖动时】事件中的case2，在弹出的关联菜单中选择【切换为＜If＞或＜Else If＞】，见图18。切换后如图19所示，此时，当拖动事件执行时，里面包含的两个用例都会执行。单击【预览】按钮测试效果，此时向左拖动已经按照我们预设的约束条件生效。

（图16）

（图17）

（图18）

（图19）

对于刚刚接触Axure的读者来说，上面的操作看上去比较复杂，其实很简单，用语言描述如下：当拖动slider_dp时，如果slider_dp的x坐标小于16，就移动回（x:16，y:13）。这个坐标位置，就是slider_dp的默认位置，见本章图11，以此来约束slider_dp不能滑出我们指定的坐标位置。随着你对Axure操作细节的熟悉和对Axure工作原理的理解，这些操作会变得越来越简单。下面继续实现向右拖动的约束。

第四步：当 slider_dp 向右拖动时，其x坐标不能大于 open部件的x坐标位置，也就是 181，见图20。语言描述如下：当拖动slider_dp时，如果其x坐标大于181，就将其移动到指定坐标位置（x:181，y:13），也就是open部件的坐标位置。根据第三步中向左拖动时的操作，继续给slider_dp添加用例，如图21。

（图20）

至此，滑动解锁的交互案例就全部制作完毕了，在初学阶段强烈建议大家养成给部件和用例命名的好习惯。这样当某个事件中包含多个用例时，便于我们维护和更新，如图21。修改后见图22。

（图21）

第五步：在顶部的工具栏中单击【预览】按钮，或者按下快捷键F5/Shift+Command+P，快速预览交互效果。

（图22）