ag-grid 防止 rowDrop

Question

我有一个启用行拖动的 ag-grid。我需要用户能够拖放第一行的所有行 except。第一行必须保留在索引 0 处。我看到的问题是，虽然我下面的代码可以很好地禁用 拖动 索引 0 处的行，但用户仍然可以 drop 其他行进入索引 0。我想防止这种情况发生。

这是我的组件的简化版本：

import React, { useState } from 'react'
import { AgGridReact } from 'ag-grid-react';

const AgGrid = () => {
  const [gridApi, setGridApi] = useState(null)
  const [rowData, setRowData] = useState([
    {Name: "name1", Type: "type1", Draggable: false},
    {Name: "name2", Type: "type2", Draggable: true},
    {Name: "name3", Type: "type", Draggable: true}
  ]}

  const columnDefs= [
    {
      field: 'Name',
      rowDrag: ({data}) => data.Draggable
    },{
      field: 'Type'
    }
  ]
  
  return (
    <div className="ag-theme-alpine">
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onGridReady{(params) => setGridApi(params.api)}
        rowDragManaged={true}
      />
    </div>
  )
})

我希望有一个 rowDrop 道具或某种机制来保持一行，但如果存在类似的东西，我似乎找不到它。

注意

我尝试了无管理的拖动，但发现自己编写了大量的逻辑只是为了保持那一行。如果有一个简单的onRowDragStarted 和onRowDragEnded 事件，实现起来肯定会更简单。由于他们website 中描述的行为，我遇到了很多问题，并在下面引用：

“如果在网格外完成拖动，则rowDragLeave 是最后一个触发的事件，不会触发rowDragEnd”。

任何帮助将不胜感激！

Answer 1

使用rowDragMove 事件，不要让索引 0 处的行移动，也不要让任何行移动到索引 0。

在使用非托管行拖动时，将rowDragMove 事件设置为：

  onRowDragMove = (event) => {
    if (event.node.id === 0)
    {
      return;
    }
    var movingNode = event.node;
    var overNode = event.overNode;
    var rowNeedsToMove = movingNode !== overNode;
    if (rowNeedsToMove) {
      var movingData = movingNode.data;
      var overData = overNode.data;
      var fromIndex = immutableStore.indexOf(movingData);
      var toIndex = immutableStore.indexOf(overData);
      var newStore = immutableStore.slice();
      moveInArray(newStore, fromIndex, toIndex);
      immutableStore = newStore;
      this.gridApi.setRowData(newStore);
      this.gridApi.clearFocusedCell();
    }
    function moveInArray(arr, fromIndex, toIndex) {
      if (toIndex === 0)
      {
        toIndex = 1;
      }
      var element = arr[fromIndex];
      arr.splice(fromIndex, 1);
      arr.splice(toIndex, 0, element);
    }
  };

Demo.