Angular Kendo Grid如何实现单元格拖拽多选并返回选中坐标？

可以完整实现你描述的拖拽选择单元格、高亮选区、返回选中单元格坐标的需求，Kendo Angular Grid没有提供开箱即用的该功能，但可以通过官方开放的事件接口结合自定义交互逻辑实现，无需修改框架底层代码。

核心实现逻辑 #

• 状态标记：维护3个核心状态变量
  • isDragging: boolean：标记当前是否处于拖拽选择过程中，鼠标在单元格上按下时置为true，全局鼠标松开事件触发时置为false
  • startCell: {rowIndex: number, colIndex: number}：记录鼠标按下时的起始单元格行列坐标
  • selectedCells: Array<{rowIndex: number, colIndex: number}>：存储最终选中的单元格坐标集合
• 事件绑定：
  1. 给Grid单元格绑定mousedown事件：触发时记录起始单元格坐标，初始化选中集合，开启拖拽状态
  2. 给每个单元格绑定mouseenter事件：拖拽状态下触发时，实时计算当前鼠标所在单元格和起始单元格围成的矩形选区
  3. 给全局document绑定mouseup事件：触发时结束拖拽状态，输出最终选中的单元格坐标集合
• 高亮渲染：每次选区更新时，计算选区的行列边界（最小/最大行号、最小/最大列号），给边界范围内的所有单元格添加自定义选中样式类，移除范围外单元格的选中样式，实现拖拽过程中覆盖区域实时高亮的效果
• 坐标计算：拖拽结束后，遍历选区边界内的所有单元格，将对应的行列索引、绑定的行数据、列字段信息存入结果数组，即可返回给业务逻辑使用

避坑提示 #

• 提前给Grid配置[selectable]="'cell'"基础单元格选择模式，同时关闭默认的点击单选、Ctrl多选的默认行为，避免和自定义拖拽逻辑冲突
• 拖拽过程中临时给页面添加user-select: none样式，避免选中单元格内文本打断拖拽交互
• 如果使用了虚拟滚动、列锁定功能，需要在滚动回调、动态渲染单元格时同步绑定事件、补全高亮状态，避免滚动后选中状态丢失

内容的提问来源于stack exchange，提问作者Iorek