一抹斯文的粉笔灰1. 中继器拖动分组选择器原型设计概述
作为一名长期奋战在一线的产品经理，我深知在后台管理系统、权限配置等场景中，分组选择功能的高频需求。传统多选框或下拉选择在操作效率和直观性上存在明显短板，而基于中继器（Repeater）实现的拖动分组选择器，则完美解决了这一痛点。
这个原型模板的核心价值在于：
- 通过拖拽交互实现成员在三个组别间的自由分配
- 基于中继器数据结构实现动态内容管理
- 可视化展示分组结果，支持即时操作反馈
- 适配各类需要灵活分组的业务场景（如用户权限分配、内容分类管理等）
提示：中继器是Axure中的高级组件，相当于一个数据容器，可以通过表格形式管理多条数据记录，并动态生成对应的界面元素。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 原型核心功能解析
2.1 交互逻辑设计
整个拖动分组选择器的工作流程可分为四个关键阶段：
-
初始化加载：
- 从中继器数据集读取初始成员列表
- 根据"所属分组"字段自动归类到对应区域
- 渲染每个成员的视觉样式（头像+名称）
-
拖拽开始：
- 用户按住成员卡片时触发拖拽准备
- 记录当前拖拽元素的唯一标识（如userID）
- 显示半透明拖拽跟随效果
-
拖拽过程：
- 实时检测鼠标位置与目标分区的重叠状态
- 高亮可能的目标区域（蓝色边框+透明度变化）
- 禁止拖拽到非接收区域（如空白处）
-
拖拽结束：
- 判断最终释放位置的有效性
- 更新中继器对应记录的"所属分组"字段
- 触发界面重绘，显示新的分组状态
2.2 数据结构设计
中继器数据集包含以下关键字段：
| 字段名 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| userID | 文本 | 成员唯一标识 | U1001 |
| userName | 文本 | 成员名称 | 张三 |
| avatar | 图片/URL | 头像图片 | [base64] |
| group | 文本 | 所属分组 | groupA |
注意：group字段建议使用英文标识（如groupA/groupB/groupC），方便后续条件判断和样式控制。