Question

我需要使用拖放功能在ag-grid中重新排序行。拖放方法很简单但是当发生丢弃时，似乎没有简单的方法来切换行位置。

我尝试了

gridOptions.api.removeItems(selectedNode);

清除当前然后

gridOptions.api.insertItemsAtIndex(2, savedNode);

但是掉落事件似乎重新开始阻止这种方法。此外，insertItems（首先运行时）会在内部ag-grid循环中出现。

我宁愿不手动重新排序gridRows，然后重置gridRow数据，这有点笨重。这似乎是大多数网格上的常见请求，因此我认为可以完成但只是错过了相关文档。谢谢你的帮助..

Answer 1

K终于得到了一个Angular 2方法，但是目前我必须关闭网格上的排序和过滤。

此特定示例依赖于启用行选择（由于它如何查找某些记录）。应该禁用网格拖拽（因为它在视觉上拖动网格很糟糕）而是使用processRowPostCreate在行级别设置可拖动的参数。这会将拖动选项设置为看起来更好的行。

in gridOptions

 processRowPostCreate: (params) => {
            this.generateRowEvents(params);
        },

调用

private generateRowEvents(params) {
    params.eRow.draggable = true; 
    params.eRow.ondragstart = this.onDrag(event);
    params.eRow.ondragover = this.onDragOver(event);
    params.eRow.ondrop = this.onDrop(event);
}

我在onDrag方法中跟踪源记录

                 var targetRowId: any = $event.target.attributes.row.value;
                 this.savedDragSourceData = targetRowId;

像往常一样

onDragOver

在下降时，我们必须防止无限循环（当网格物体被添加到网格中时，ag-grid似乎会调用实时方法，因此多次出现ondrop）然后插入，删除和拼接网格及其数据source（我将继续使用网格来填充数据而不是源数据，因为这将允许源/过滤器，当前doign插入空行）。然后发出一个事件（在这种情况下），要求拥有的组件“保存”＆＃39;调整后的数据。

private onDrop($event) {
     if ($event && !this.infiniteLoopCheck) {
         if ($event.dataTransfer) {
             if (this.enableInternalDragDrop) {
                 this.infiniteLoopCheck= true;

                  var draggedRows: any = this.gridRows[this.savedDragSourceData];

                 // get the destination row
                 var targetRowId: any = $event.target.offsetParent.attributes.row.value;

                 // remove  from the current location
                 this.gridOptions.api.removeItems(this.gridOptions.api.getSelectedNodes());

                 // remove from source Data  
                this.gridRows.splice(this.savedDragSourceData, 1);


                 if (draggedRows) {
                     // insert into specified drop location
                     this.gridOptions.api.insertItemsAtIndex(targetRowId, [draggedRows]);

                     // re-add rows to source data..
                     this.gridRows.splice(targetRowId, 0, checkAdd);

                     this.saveRequestEvent.emit(this.gridRows);// shout out that a save is needed                     }
                 this.v= false;
             }
             else {
                 this.onDropEvent.emit($event);
             }
         }
     }
 }

注意我们将网格包装在我们自己的类中，以允许我们编写一组网格方法，并且无论何时使用网格，都不会在应用程序上复制。

我将在接下来的几天内对其进行改进，但作为一个基本功能，它允许角度为2的ag网格拖动拖放行来对记录进行排序。

Answer 2

如果您未在ag-grid中找到解决方案，那么您可以通过添加一个指令（＆＃34; ngDraggable＆＃34;）并将其与ag-grid集成来实现此目的。

请找到以下工作的plnkr。

https://embed.plnkr.co/qLy0EX/

ngDraggable

希望这会有所帮助..

ag-grid：使用Drag drop重新排序网格中的行

2 个答案: