Axure实现鼠标矩形控件拖动，超简单！AxureRP 10

已于 2024-06-24 12:25:31 修改
阅读量7.4k 收藏 6
点赞数 6
分类专栏： 笔记 文章标签： 产品设计
于 2021-06-24 17:00:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BigKing_One/article/details/118191118
版权
本文介绍了如何使用Axure RP 10实现动态面板内的矩形控件拖动功能，详细步骤包括创建动态面板，设置拖动事件。此外，还提及了额外效果，如边框变化、形状缩放及背景调整等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先看效果：

在这里插入图片描述

实现拖动步骤：

1.拖出一个动态面板，并在动态面板内部放一个矩形
在这里插入图片描述
如图所示：由于Axure只能对动态面板做拖动，所以要放在动态面板state 1中
在这里插入图片描述

2.给动态面板设置拖动事件
在这里插入图片描述
如图所示：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.完成了！效果：
在这里插入图片描述

其他效果

在刚刚开始的案例图中还有一些效果，实现方法如下：
1.边框虚线、背景变灰，背景透明
在这里插入图片描述
在这里插入图片描述
2.鼠标按下时形状变大
在这里插入图片描述
3.鼠标松开时形状恢复
在这里插入图片描述

最终效果

其实和开头一样
在这里插入图片描述
觉得还可以记得给我点个赞，谢谢

Axure常用交互效果二——拖动效果
benleiqiang的博客
10-09 2669
拖动效果的交互设计原理是动态面板和移动的组合应用，再此基础上可以扩展出很多交互效果，例如垂直拖动、水平拖动、延时拖动等，在应用场景中适用于菜单的滑动/拖动、内页、长图等方面，在大型交互设计中也发挥着重要作用，例如车辆轨迹、车辆位置、滚动条、电子屏等等。我们将菜单向右拖动，回到初始位置，正好是向右滑动的极限！初始位置，正好是向右拖动的阈值！我们向左拖动，直到在窗口中显示完菜单的最后一项，观察这时的X坐标：-240 这就表示当我们向左拖动时，到达这个位置就是最低的阈值，那么我们向左拖动的阈值就是-240。
Axure RP从入门到精通（二十）鼠标指针函数
人不风流枉少年
06-21 1918
示例 拖动一个树形控件，并设置为隐藏。 为页面添加一个页面鼠标右键时事件让树形菜单出现在鼠标点击的位置。
Axure RP10——值得信赖的强大的原型制作工具，无需编写代码即可创造无限可能
Acunetix的博客
03-09 1万+
一款产品的经久不衰，离不开适应需求的更新换代，上海道宁作为Axure Software的国内正式授权代理商，为广大从业者带来更好的工作软件
从零开始学习的Axure 10 RP 笔记生活
Majoryx的博客
05-17 2055
通过制作一个简单的原型，使用几天的时间，快速的把它做出来，让它可操作、可用，然后我们就可以针对它的一些问题进行指出 指出问题之后在后面设计 后面就是围绕设计进行讨论 而不是设计出来成果之后再对它的各种功能、交互、服务上说不合理，也就是 尽早去发现这些问题。线框图、可交互原型、PRD文档。本身是静态，它是不可以动的，不可交互的。图表绘制、中继器、元件库、交互用例、表单控件的功能。在原型图中我们关注的是这个原型当中，它所包含的内容、信息、字段。软件窗口、绘图功能、图形注释、组价库、交互功能、表达式。
【Axure教程】拖动画图——画方框
mushe93的博客
03-20 1249
今天教大家制作拖动画图——画方框案例的原型模版，我们可以在指定区域通过鼠标拖动的方式画出方框，画多少个都可以，具体效果可以打开下方原型地址体验
Axure RP 10 进阶指南：从全局变量到JavaScript语法，打造高效原型设计！
ofay
08-30 1836
前面我们设置了「母版」后，而我们每个页面所需要选中的导航和页面标签标题是不一样的，这种如果我们要实现动态变更的话，就可以使用「全局变量」。首先，我们在菜单中找到“项目 – 全局变量”。然后就会弹出新增变量名：：这个是用来控制标签名称的。：这个是用来控制左边菜单选中效果的。接下来，我们就回到“母版”中去定义交互效果：：我是页面主内容：二级菜单名称A这样在页面预览时，就可以看到我们最终的效果，选中了菜单“二级菜单名称A”，同时标题文本为“我是页面主内容”。
Axure RP 10：原型设计的新标杆
gitblog_06597的博客
09-20 1148
Axure RP 10：原型设计的新标杆 软件资源Axure10Win与Mac安装程序下载含汉化包 项目地址: https://gitcode.com/Resource-Bundle-Collection/f7649 ...
Axure RP 10制作用户登录界面
Peppaaa的博客
05-29 5988
本文介绍了如何用AxureRP10制作用户登录界面。
Axure RP 10选项卡效果制作
Peppaaa的博客
05-23 679
本文介绍了如何用Axure RP 10制作选项卡效果。
工具篇之Axure RP 10的使用
qq_62377885的博客
10-20 9750
最近在学习原型图，针对画原型图的工具，反复对比墨刀、Axurexiaopiu后，最终选择Axure。接下来，我便从的下载、安装、中文字体、授权等几个方面，来介绍Axure。
Axure-RP9培训教程PPT
02-06
### Axure RP9培训教程知识点概述 #### 一、Axure RP简介 - **软件名称**: Axure RP Pro，简称Axure RP。 - **发音**: “Ack-Sure”。 - **开发者**: 美国Axure Software Solution公司。 - **用途**: 快速原型设计...
Axure动态面板上下拖动效果实现
12-05
个人在使用Axure过程中总结的动态面板实现上下拖动效果的步骤，描述细致，有详细截图说明。
Axure RP：AxureRP元件库详解_2024-07-22_05-07-14.Tex
11-15 1013
自定义元件是Axure RP元件库的扩展功能，允许用户根据自己的需求创建和保存特定的元件。例如，如果项目中需要频繁使用一个特定样式的按钮，可以创建一个自定义按钮元件，包括其外观、交互和动态面板等属性，然后保存到自定义元件库中，以供后续使用。设计元件：在画布上设计出所需的元件，包括其外观、交互和动态面板等属性。保存元件：选择设计好的元件，右键点击，选择“保存元件到库”选项，然后选择保存到自定义元件库中。命名与分类：为自定义元件命名，并选择合适的分类，以便于管理和查找。使用自定义元件。
掌握Axure RP 8：Web与App原型设计与交互实现
### 知识点：Axure RP 8源文件 #### 1. Axure RP 8概述 Axure RP 8 是一款专业的产品原型设计工具，广泛用于Web和App平台的产品设计与交互效果实现。它的核心功能包括绘制线框图、制作高保真原型、添加交互逻辑以及...
Axure RP 10科学试用办法
cubesir的专栏
04-28 2544
Axure RP 10官网申请试用办法
Axure中元件的拖动效果-动图面板(九)
xyphf的博客
09-21 1822
右击元件转化为【动态面板】 选择【动态面板】选择拖拽属性
【2025年】Axure RP 10下载安装超详细保姆级教程（附安装包）
最新发布
INosdfgs的博客
04-23 2025
在如今竞争激烈的互联网产品设计领域，一款高效的原型设计工具显得尤为重要。Axure RP 10凭借其强大的交互设计功能和丰富的组件库，成为了众多设计师的首选！本教程将带你一步步完成安装过程，让你快速进入设计状态！通过这篇超详细教程，相信大家已经成功安装了Axure RP 10并且可以开始使用了！原型设计作为产品开发的重要环节，掌握好Axure这款工具绝对能让你的工作效率提升一个台阶。如果在使用过程中遇到任何问题，欢迎在评论区留言交流！
我的产品经理之路（一）——Axure RP10的下载安装、汉化与使用
热门推荐
Hj_tao的博客
03-24 3万+
我的产品经理之路（一）——Axure RP10的下载安装、汉化与激活走进产品第一步——交互软件不能缺Axure RP10的下载及安装Axure RP10的汉化Axure RP10的激活如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 走进产品第一步——交互软件不能缺 你好呀
AxureRP10基本操作原型页面跳转链接导出html
webnoties的专栏
03-01 2055
在菜单栏中选择“文件” > “新建” > “Axure RP 10 文件”，创建一个新的项目。在“交互”选项卡中，设置元素之间的交互动作，如链接到其他页面、显示/隐藏元素等。在右侧的“交互”面板中，设置触发事件和相应的动作，如点击按钮跳转到其他页面。在左侧的页面管理器中，右键单击“页面”文件夹，选择“新建页面”。重复以上步骤，创建另外两个页面，比如“产品页面”和“联系页面”。在菜单栏中选择“文件” > “导出” > “HTML”。输入页面名称，比如“首页”，然后点击“确定”。选择需要添加交互的元素。
Axure控件拖动画线
02-09
### Axure 中使用控件实现拖动画线的方法 在Axure中，通过特定的交互设计可以模拟鼠标拖动来绘制线条的效果。为了创建这种效果，主要依赖于动态面板和条件样式等功能。 #### 创建基础结构 首先，在工作区中放置一个矩形作为起始点，并将其命名为`起点`。接着，添加另一个矩形用于表示终点并命名其为`终点`。这两个图形将帮助定义所要绘制线条的方向与长度[^1]。 ```html <div style="width: 20px; height: 20px; background-color: red;" id="startPoint"></div> <div style="width: 20px; height: 20px; background-color: blue;" id="endPoint"></div> ``` #### 添加动态面板 引入一个动态面板，该面板内含有一条直线元素，这条线会随着用户的操作而变化。设定此动态面板具有足够的大小以适应可能的最大范围内的移动距离[^4]。 #### 编写交互逻辑 配置`起点`对象上的鼠标按下事件，使得当用户按住鼠标左键时启动拖曳模式；同时设置相应的释放动作以便结束绘图过程。在此期间，需不断更新`终点`的位置以及调整连线两端坐标使其跟随鼠标的当前位置变动。 对于上述描述的具体实施细节如下： - **OnMouseUp**: 设置`终点`位置等于当前鼠标指针所在之处； - **OnMouseMove (while dragging)**: 更新`终点`坐标的X轴Y轴数值至最新获取到的数据； - **After Dragging Ends**: 让新产生的路径成为固定的视觉反馈给使用者查看。 这些步骤能够有效地模仿真实世界里人们利用工具作画的行为习惯，从而增强原型产品的互动性和用户体验感。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值