揭开 Choerodon UI 拖拽功能的神秘面纱

news2025/1/26 15:47:16

在这里插入图片描述

01 引言

系统的交互方式主要由点击、选择等组成。为了提升 HZERO 系统的用户体验、减少部分操作步骤，组件库集成了卓越的拖拽功能，让用户可以更高效流畅的操作系统。

例如：表格支持多行拖拽排序、跨表数据调整、个性化调整列顺序；附件支持拖拽上传；以及Tabs菜单和Modal、Tree、Board、TextArea等组件的拖拽交互，让操作更高效。接下来，将深入介绍这些功能特性。

02 功能特性

拖拽功能直观、易用

统一的拖拽图标和鼠标悬停样式，让拖拽操作自然而流畅。

Table 表格

在这里插入图片描述

Attachment 附件

在这里插入图片描述

Tree 树组件

在这里插入图片描述

组件支持拖拽介绍

多组件支持： Table、Attachment、Tree、Modal 等组件均支持拖拽，实现多样化的交互方式。

批量操作： 拖拽功能支持批量处理，如多行数据的快速排序和文件的批量上传。

Table 表格

多个拖拽功能，可分别设置属性控制开启

可单行、多行拖拽
拖拽调整列宽度： 拖拽列的 border，调整列宽，调整成适合自己的显示宽度

在这里插入图片描述

个性化功能支持列拽拖： 拖拽调整列顺序，也可调整列为固定列

在这里插入图片描述

组合排序字段支持拖拽改变顺序

在这里插入图片描述

Board 看板

列表、卡片、看板三种展示模式

看板模式： 按照分类展示数据，用户可拖拽展示项调整分类或者排序

在这里插入图片描述

Tree 树

丰富的属性控制拖拽流程

节点拖拽：可拖入节点、可排序、可改变节点父子关系、可控制节点是否能够拖拽
交互样式符合用户习惯：拖入、排序有不同的高亮样式

在这里插入图片描述

Tabs 标签

支持拖拽改变 Tab 顺序： HZERO 系统的页面页签使用的是 Tabs 组件，最新就支持了拖拽调整 Tab 页签，使得用户更方便的查看页面。

在这里插入图片描述

Attachment 附件\Upload 上传组件

支持拖拽调整文件顺序：可调整文件列表或者图片墙中元素顺序。

在这里插入图片描述

支持拖拽上传文件：可拖拽多个文件同时上传，简化操作步骤。

在这里插入图片描述

Modal 模态框

可拖拽 Title 区域，调整显示位置：用户可以根据需要移动模态框，避免遮挡重要内容。
可配置开启拖拽调整面板大小：拖拽调整大小，使得弹窗显示大小更加符合自己的视觉。

在这里插入图片描述

TextArea 文本域\IntlField 多语言多行模式

可配置拖拽调整输入框大小：根据输入文本调整输入框大小，方便了用户查看内容的同时，又不影响默认显示大小。

在这里插入图片描述

操作效率提升

1. 快速移动和排序 ：拖拽操作允许用户快速移动对象和重新排序，极大提升了操作效率。

2. 批量操作拖拽： 多个拖拽功能支持批量操作。

文件批量选择，然后拖拽到指定区域上传；
表格更进一步支持了多行拖拽的功能，开启多行拖拽后，勾选想要排序的记录，然后执行拖拽操作，选中的记录一同被移动到目标位置。提升了用户的操作效率。

在这里插入图片描述

界面灵活性增强

系统界面初始化时具有统一的展示效果，但对于不同的用户，信息的展示优先级是不同的。

组件库集成了个性化的能力，支持用户通过拖拽调整界面元素，如表格列顺序、Tabs标签顺序，满足个性化需求，动态的调整增加了界面的灵活性。

Table 表格个性化，拖拽调整列顺序，也可调整列为固定列：

在这里插入图片描述

Table 表格拖拽列的 border，调整列宽：

在这里插入图片描述

Board 看板有列表、卡片、看板三种展示模式，看板模式中按照分类展示数据，用户可拖拽展示项调整分类或者排序：

在这里插入图片描述

更少的确认步骤

在传统操作中，用户往往需要进行多次操作来完成一个流程。拖拽操作则简化了这些步骤，通过一次拖拽操作即可完成。

拖拽操作提供了对对象位置的精准控制，用户可以直接将对象拖动到目标位置。

拖拽上传文件： 可以同时选择多个文件，一并拖拽到上传区域，完成上传

在这里插入图片描述

03 场景案例 - 多表格间数据拖拽

案例背景

某智能制造产品团队对表格数据操作有特殊要求。HR 会定时将员工信息进行分类处理，需要将员工分类到不同的表格中，传统方式是利用穿梭框组件，先勾选记录，然后点击中间的调整按钮，最后还需要在目标表格中对数据上下排序，这样的操作步骤过多，不够直观，效率不高。

在这里插入图片描述

解决方案

组件库的表格组件提供了强大的拖拽能力，支持拖拽区域自定义，不仅可以将数据在同一个表格中拖拽排序，还可以跨表格同步数据，完美解决客户的需求。

应用步骤与效果

1. 开发好不同的员工分类表格；

2. 利用表格提供的属性，配置自定义拖拽域；

3. 然后增加跨表拖拽员工数据逻辑；

4. 进一步配置多选拖拽功能。

最后，帮助客户实现了多选跨表拖拽数据，并同时支持排序，简化了操作步骤，提升了效率。

在这里插入图片描述

欢迎试用

以上就是 Choerodon UI 组件库对拖拽功能支持的简要介绍，如果您有更好的想法和建议，欢迎积极反馈给我们。欢迎试用，我们诚挚的邀请您和我们一起共建 Choerodon UI，期待您的 Issue！

🔗 github

官网组件拖拽示例地址：

🔗 Table

🔗 Tabs

🔗 Board

🔗 Modal

🔗 TextArea

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2263067.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！