light-code/web/src/apps/muse/base/table/DragSelection.md

表格拖拽多选功能

功能概述

表格组件现在支持拖拽多选功能，用户可以通过鼠标拖拽来快速选择多行数据，提升批量操作的效率。

功能特性

✅ 已实现的功能

1. 基础拖拽选择

   • 在表格行上拖拽可以选择多行
   • 实时显示选择框和选中状态
   • 拖拽结束后更新选中状态

2. 智能交互

   • 避免在复选框和操作按钮区域启动拖拽
   • 设置最小拖拽距离阈值，避免意外触发
   • 拖拽过程中禁用文本选择

3. 键盘修饰键支持

   • Ctrl/Cmd + 拖拽：追加选择模式（切换选中状态）
   • Shift + 点击复选框：范围选择模式
   • Ctrl/Cmd + A：全选
   • Escape：取消拖拽或清空选择

4. 虚拟滚动兼容

   • 正确处理虚拟滚动的坐标转换
   • 考虑滚动位置的行索引计算

5. 视觉反馈

   • 拖拽选择框的实时显示
   • 选中行的高亮效果
   • 拖拽过程中的样式变化
   • 用户操作提示

使用方法

基本配置

import { Table } from './base/table/Table';
import { RowSelection } from './base/table/types';

const rowSelection: RowSelection<Mark> = {
  type: 'checkbox',
  selectedRowKeys,
  onChange: (selectedRowKeys, selectedRows) => {
    // 处理选择变化
    setSelectedRowKeys(selectedRowKeys);
  },
  dragSelection: {
    enabled: true, // 启用拖拽多选
    multi: true,   // 支持多选
    onDragStart: (startRowIndex) => {
      console.log('开始拖拽选择');
    },
    onDragEnd: (selectedRows) => {
      console.log('拖拽选择结束');
    },
  },
};

<Table
  data={data}
  columns={columns}
  rowSelection={rowSelection}
  // ... 其他属性
/>

配置选项

DragSelectionConfig

interface DragSelectionConfig {
  enabled?: boolean; // 是否启用拖拽选择，默认为 true
  multi?: boolean; // 是否支持多选，默认为 true
  onDragStart?: (startRowIndex: number) => void; // 拖拽开始回调
  onDragEnd?: (selectedRows: Mark[]) => void; // 拖拽结束回调
}

用户操作指南

1. 基础拖拽选择

   • 在表格行（非复选框/操作按钮区域）按下鼠标左键
   • 拖拽至目标行
   • 释放鼠标完成选择

2. 追加选择

   • 按住 Ctrl（Windows/Linux）或 Cmd（Mac）键
   • 进行拖拽选择
   • 已选中的行会切换状态（选中变未选中，未选中变选中）

3. 范围选择

   • 先点击一个复选框选中一行
   • 按住 Shift 键
   • 点击另一个复选框
   • 两行之间的所有行都会被选中

4. 键盘快捷键

   • Ctrl/Cmd + A：全选所有行
   • Escape：取消当前拖拽操作或清空所有选择

技术实现

核心组件

1. 状态管理

   • DragSelectionState：管理拖拽状态
   • 鼠标位置跟踪
   • 选择范围计算

2. 事件处理

   • handleMouseDown：开始拖拽检测
   • handleMouseMove：拖拽过程处理
   • handleMouseUp：完成选择操作

3. 坐标转换

   • 虚拟滚动坐标映射
   • 行索引计算
   • 碰撞检测算法

样式类名

• .row-selected：选中行样式
• .row-drag-selected：拖拽选中行样式
• .drag-selection-box：拖拽选择框样式
• .drag-hint：操作提示样式

性能优化

1. 事件防抖

   • 设置拖拽距离阈值
   • 避免频繁状态更新

2. 虚拟滚动适配

   • 只处理可视区域内的行
   • 优化大数据量场景

3. 内存管理

   • 及时清理事件监听器
   • 合理的状态重置

兼容性

• ✅ 支持现有的复选框选择
• ✅ 兼容虚拟滚动
• ✅ 支持排序和筛选
• ✅ 响应式设计
• ✅ 键盘导航友好

示例代码

查看 DragSelectionExample.tsx 文件获取完整的使用示例。

注意事项

1. 拖拽选择不会在复选框和操作按钮区域启动
2. 需要设置合适的行高以确保拖拽体验
3. 大数据量时建议启用虚拟滚动
4. 移动端设备可能需要额外的触摸事件处理

未来规划

• 触摸设备支持
• 自定义拖拽选择框样式
• 更多键盘快捷键
• 拖拽选择动画效果
• 选择统计和操作面板