如何实现将条目拖拽放置到Ag-grid可编辑网格单元格中

云原生阿岚

2026-10-4

Ag-grid 可编辑单元格条目拖拽放置实现方案

可以实现该需求，Ag-grid原生未封装该场景的专用API，但可以通过HTML5原生拖拽API结合Ag-grid的单元格事件体系完成开发，具体实现步骤如下：

配置拖拽源属性
给需要拖拽的条目DOM设置draggable="true"属性，监听dragstart事件，将需要传递的条目数据序列化后存入事件的dataTransfer对象中，示例：
```
// 拖拽源dragstart事件回调
function handleDragStart(e, itemData) {
  e.dataTransfer.setData('text/plain', JSON.stringify(itemData))
}
```
限制可放置范围
给Ag-grid绑定cellDragOver事件，阻止浏览器默认行为，同时判断当前悬浮单元格是否为可编辑单元格，仅对可编辑单元格开放放置权限，可同步添加高亮样式提示用户：
```
// cellDragOver事件回调
function handleCellDragOver(e) {
  if (!e.column.getColDef().editable) return
  e.event.preventDefault()
  // 可在此处添加自定义高亮样式逻辑
}
```

实现放置写入逻辑
给Ag-grid绑定cellDrop事件，读取拖拽时存储的条目数据，调用Ag-grid的setCellValue方法将数据写入目标可编辑单元格：

// cellDrop事件回调
function handleCellDrop(e) {
  if (!e.column.getColDef().editable) return
  const dragItem = JSON.parse(e.event.dataTransfer.getData('text/plain'))
  // 可根据业务需求处理数据格式后再写入
  e.api.setCellValue({
    rowIndex: e.rowIndex,
    colKey: e.column.getId(),
    value: dragItem
  })
}