Ag-Grid单列表格：如何实现拖动开始时同时选中行？

Got it, let's work through this—since your row nodes already have built-in selection logic (that blue border on click), we can absolutely make clicking a row both select it and start dragging without relying on keybinds for suppressRowDrag. Here's how to do it:

The Core Issue #

By default, AG Grid prioritizes drag events over click selection when row dragging is enabled. We need to explicitly tie the selection action to both row clicks and drag initiation to get the behavior you want.

Step-by-Step Implementation #

1. Base Grid Configuration
   Enable row dragging on your single column, set your preferred selection mode, and skip the key-based suppressRowDrag workaround:

   const gridOptions = {
     columnDefs: [
       { field: 'yourDataField', rowDrag: true } // Turn on drag for your single column
     ],
     rowSelection: 'single', // Use 'multiple' if you need multi-select functionality
     suppressRowDrag: false, // No keybinds required here
   };
   

2. Add Click-to-Select Logic
   Use the onRowClicked event to manually trigger selection whenever the row is clicked:

   const gridOptions = {
     // ...existing config...
     onRowClicked: (params) => {
       // For single-select: force the clicked row to be selected
       params.node.setSelected(true);
       // For multi-select: toggle the row's selected state instead
       // params.node.setSelected(!params.node.isSelected());
     },
   };
   

3. Add Drag Start Safety Net
   To cover cases where a user starts dragging without clicking first (e.g., pressing and dragging immediately), use the onRowDragStart event to ensure the row is selected when drag initiates:

   const gridOptions = {
     // ...existing config...
     onRowDragStart: (params) => {
       if (!params.node.isSelected()) {
         params.node.setSelected(true);
       }
     },
   };
   

4. Optional CSS Tweak
   Make sure the selected row's blue border stays visible during dragging (default styles might obscure it):

   .ag-row-selected {
     border: 2px solid blue !important;
   }
   .ag-row-dragging {
     opacity: 0.8; /* Keep drag transparency while preserving the selection border */
   }
   

Why This Works #

We're leveraging the row node's built-in setSelected() method and hooking it into both click and drag events. This lets us keep the default drag behavior while explicitly triggering selection at the same time—no keybinds needed, and it aligns with the intuitive interaction you're looking for.

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