拖放不适用于 ag-grid-angular答案

【问题标题】：Drag and drop is not working on ag-grid-angular拖放不适用于 ag-grid-angular
【发布时间】：2019-04-12 17:47:38
【问题描述】：

我在枢轴模式下使用 ag 网格角度。我面临的问题是无法在行、值和列区域中拖放列。我可以通过 ts 文件在这些区域中添加列，但不能通过拖放从 UI 中添加。我可以从这些区域中取出任何列，但不能添加和列。这是ag代码。

<ag-grid-angular #agGrid
                 style="width: 90%; height: 500px; margin-top: 30px;"
                 id="myGrid"
                 [rowData]="rowData"
                 class="ag-theme-balham"
                 [columnDefs]="columnDefs"
                 [enableColResize]="true"
                 [enableSorting]="true"
                 [sideBar]="sideBar"
                 [defaultColDef]="defaultColDef"
                 [pivotMode]="true"
                 [statusBar]="statusBar"
                 [enableRangeSelection]="true"
                 enableRowGroup="true"
                 dragAndDrop =" true"
                 [animateRows]="true"
                 (gridReady)="onGridReady($event)"></ag-grid-angular>

任何人都可以告诉我我在这里缺少什么。

Plunker 喜欢类似的问题：https://plnkr.co/edit/xtPbAztpG14bleAF9bgy?p=preview

【问题讨论】：

标签： angular drag-and-drop ag-grid

【解决方案1】：

在 ag-grid 模式下，您不能拖放行。不过你可以通过在鼠标悬停（mouseover）上动态添加draggable=true来使行可拖动，通过dom获取单元格id并使其可拖动。

A simple code would be

    // This method is used to handle the drag row functionality in ag-grid. It adds the draggable event to rows in grid.
    this.gridOptions.onCellMouseOver = (dragEvent: any) => {
      if (dragEvent.event.target && dragEvent.event.target.offsetParent.classList.contains('ag-row')) {
        dragEvent.event.target.offsetParent.setAttribute("pdraggable", "data");
        dragEvent.event.target.offsetParent.setAttribute("draggable", "true");
        //dragStart event needs to be added as firefox is not reading draggable=true without this.
        //https://salesforce.stackexchange.com/questions/214613/draggable-true-is-not-working-in-firefox-for-lightning-component
        dragEvent.event.target.offsetParent.addEventListener('dragstart', (event: any) => {
          event.dataTransfer.setData('data', 'data');
        }, true);
        this.draggedRow = dragEvent.data;
      }
      this.draggedRow = dragEvent.data;
    };
  }

【讨论】：

嗨，阿曼...您的解决方案运行良好。但是我得到了另一种没有手动代码的方法。 Ag-grid inbuild 提供此功能...ag-grid.com/javascript-grid-side-bar
@Abhash786 你是如何从侧边栏实现拖放功能的？

【解决方案2】：

此答案适用于所有面临相同问题的人... Ag-grid inbuild 提供此功能请参考下面...

https://www.ag-grid.com/javascript-grid-side-bar/

【讨论】：