Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

optimize(components): accuracy draggable area for TableColumnSetting with animation #465

Merged
merged 1 commit into from
Jun 1, 2024

Conversation

orangelckc
Copy link
Contributor

问题

表格列设置中,使用了拖动排序的功能并且提供了拖动块,并且拖动块在鼠标 hover 时显示 move 图标,在列标题的部分鼠标是不变化的

但目前整个单元格都可以进行拖动操作,这与用户预期不同,并且标题的部分没有占满行剩余空间,对于较短标题在点击单元格右侧空白处不会触发点击事件,见下图

image

其中红色是可以拖动的区域,蓝色是点击时触发的区域

更改

  • 放大拖动块的区域和单元格同高度,在鼠标变化为 move 时,都可以对单元格进行拖动
  • 标题区域撑满行剩余空间,所有标题的部分都可以进行点击
  • 添加拖动动画,用户体验会更好
  • 使用 filtercheckbox 元素进行过滤(添加类 .none_draggable),做到只有移动拖动块时单元格会进行拖动排序,拖动标题区域时不会触发排序

@honghuangdc honghuangdc merged commit 2aa85c6 into soybeanjs:main Jun 1, 2024
1 check passed
@orangelckc orangelckc deleted the kc/table-column-draggable branch June 1, 2024 14:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants