养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure制作:鼠标拖拽控件移动

时间:2024-11-11 14:14:45

前两天示范自作了了一个“跟着鼠标走的控件”的案例,具体可参考下面的链接地址。这里做个优化,实现用鼠标拖拽控件移动,即长按鼠标后,可以移动控件,移动控件到目的地后,松开鼠标,即停止控件的移动。效果图如下:

Axure制作:鼠标拖拽控件移动

工具/原料

AxureRP8

方法/步骤

1、新建一个“方框”和“热区“分别命名为:”方块“和”热区“”方块“大小为:200*200”热区“大小为:100*100**“热区”无所谓大小,这里仅为示例参考,可以看到“热区”如图所示:

Axure制作:鼠标拖拽控件移动

2、”方块“设置一个”命中“状态,用”虚线“状态来区别”移动“过程如图所示:

Axure制作:鼠标拖拽控件移动

3、”方块“设置一个”鼠标长按时锞蕈漉栽“的动作:-----1.设置“热区”的尺寸,尺寸大小和“方块”一致2.移动”热区“到指定位置(旌忭檀挢x,y),以鼠标的绝对位置为参考,比如:x=[[Cursor.x-This.width/2]],y=[[Cursor.y-This.height/2]])3.设置”方块“为”选中“状态-----参考参数如下图:

Axure制作:鼠标拖拽控件移动

4、“热区”需要设置两个动作,一个“鼠标移动时”,一个“鼠标松开时”

5、”热区“设置一个”鼠标移动时锞蕈漉栽“的动作:-----1.移动”热区“到指定位置(x,y),以鼠标的绝对位置为参考,比如:x=[缪梨痤刻[Cursor.x-This.width/2]],y=[[Cursor.y-This.height/2]])2.移动”方块“到指定位置(x,y),以鼠标的绝对位置为参考,比如:x=[[Cursor.x-This.width/2]],y=[[Cursor.y-This.height/2]])-----

6、”热区“设置一个”鼠标松开时锞蕈漉栽“的动作,用来结束”移动“状态:-----1.移动”热区“到指定位置(x,y),任意位置,比剧安颌儿如:x=0,y=02.设置“热区”大小为1*13.设置”方块“为”未选中“状态-----参考参数如下图:

Axure制作:鼠标拖拽控件移动

7、动作设置完后,就可以看效果了在”方块“范围内点长按鼠标后,”方块“就可以跟随鼠标移动,松开鼠标,”方块“停止移动,即完成了鼠标拖拽控件移动~哈~达成效果!相对完美

Axure制作:鼠标拖拽控件移动

© 一点知识