ag-grid 防止 rowDrop

Question

我有一个启用行拖动的 ag-grid。 我需要用户能够拖放除第一行之外的所有行。 第一行必须保留在索引 0 处。我看到的问题是，虽然我下面的代码可以很好地禁用在索引 0 处拖动行，但用户仍然可以将其他行放到索引 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事件，实现起来肯定会更简单。 由于他们网站上描述的行为，我遇到了很多问题，并在下面引用：

“如果在网格之外完成拖动，则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);
    }
  };

演示。