首页 > 电脑专区 > 电脑硬件 >

Axure制作:鼠标拖拽控件移动-动态面板方式

来源:互联网 2023-03-03 11:25:05 127

前两天分享了鼠标拖拽移动控件的一些方式,可参考以下链接;bZT办公区 - 实用经验教程分享!

今天用一个更为简洁的方式,动态面板来实现此功能~bZT办公区 - 实用经验教程分享!

效果如下:bZT办公区 - 实用经验教程分享!

1Axure制作:控件跟随鼠标移动bZT办公区 - 实用经验教程分享!

5Axure制作:鼠标拖拽控件移动bZT办公区 - 实用经验教程分享!

Axure制作:鼠标拖拽控件移动-动态面板方式bZT办公区 - 实用经验教程分享!

工具/原料

  • Axure RP 8

方法/步骤

  • 1

    新建一个“动态面板”,功能简单,这里就不命名了bZT办公区 - 实用经验教程分享!

    设置“动态面板”大小为:220*80bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    如图所示:bZT办公区 - 实用经验教程分享!

    Axure制作:鼠标拖拽控件移动-动态面板方式bZT办公区 - 实用经验教程分享!

  • 2

    在“动态面板”的“state1”内,新增两个控件:“文本框”和“矩形”;bZT办公区 - 实用经验教程分享!

    如图所示:bZT办公区 - 实用经验教程分享!

    Axure制作:鼠标拖拽控件移动-动态面板方式bZT办公区 - 实用经验教程分享!

  • 3

    设置“文本框“大小为:220*30bZT办公区 - 实用经验教程分享!

  • 4

    “矩形”命名为“方框”;bZT办公区 - 实用经验教程分享!

    设置大小为:220*80;bZT办公区 - 实用经验教程分享!

    设置“边框“不显示;bZT办公区 - 实用经验教程分享!

    设置”选中“状态,用来区别被鼠标拖拽移动时的效果;bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    ”选中“状态可参考以下截图:bZT办公区 - 实用经验教程分享!

    Axure制作:鼠标拖拽控件移动-动态面板方式bZT办公区 - 实用经验教程分享!

  • 4相关内容非法爬取自百度经验
  • 5

    “动态面板”的“state1”内的控件布局如下:bZT办公区 - 实用经验教程分享!

    ”文本框“居中方式;bZT办公区 - 实用经验教程分享!

    ”矩形:边框“与”动态面板”大小重叠,并置于“文本框”下层bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    具体参考如下图所示:bZT办公区 - 实用经验教程分享!

    Axure制作:鼠标拖拽控件移动-动态面板方式bZT办公区 - 实用经验教程分享!

  • 6

    动作设置很简单,只需要设置“动态面板”的“移动时”和“移动结束时”两个状态时的动作bZT办公区 - 实用经验教程分享!

  • 7

    动态面板”的“移动时”的动作:bZT办公区 - 实用经验教程分享!

    ---bZT办公区 - 实用经验教程分享!

    1.设置“矩形:边框”为“选中”状态bZT办公区 - 实用经验教程分享!

    2.使用DragX和DragY来移动”动态面板“bZT办公区 - 实用经验教程分享!

    ---bZT办公区 - 实用经验教程分享!

  • 8

    动态面板”的“移动结束时”的动作:bZT办公区 - 实用经验教程分享!

    ---bZT办公区 - 实用经验教程分享!

    1.设置“矩形:边框”为“取消选中”状态bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    ---bZT办公区 - 实用经验教程分享!

    Axure制作:鼠标拖拽控件移动-动态面板方式bZT办公区 - 实用经验教程分享!

  • 9

    动作设置完后,就可以看效果了bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    bZT办公区 - 实用经验教程分享!

    在”动态面板“的范围内,点击鼠标拖拽移动即可bZT办公区 - 实用经验教程分享!

    Axure制作:鼠标拖拽控件移动-动态面板方式bZT办公区 - 实用经验教程分享!

  • 10

    *此方式虽然简单,但本人不太喜欢,因为不够完美,有小瑕疵bZT办公区 - 实用经验教程分享!

    *几个鼠标拖拽移动控件方式,仅供思路参考bZT办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!bZT办公区 - 实用经验教程分享!


    标签: AXURE鼠标制作移动

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码