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);
    }
  };

演示。