揭开 Choerodon UI 拖拽功能的神秘面纱
01 引言
系统的交互方式主要由点击、选择等组成。为了提升 HZERO 系统的用户体验、减少部分操作步骤，组件库集成了卓越的拖拽功能，让用户可以更高效流畅的操作系统。
例如：表格支持多行拖拽排序、跨表数据调整、个性化调整列顺序；附件支持拖拽上传；以及Tabs菜单和Modal、Tree、Board、TextArea等组件的拖拽交互，让操作更高效。接下来，将深入介绍这些功能特性。
02 功能特性
拖拽功能直观、易用
统一的拖拽图标和鼠标悬停样式，让拖拽操作自然而流畅。
组件支持拖拽介绍
多组件支持： 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
