Ag grid ag grid：使用拖放对网格中的行重新排序

我需要使用拖放来重新排列ag网格中的行。拖放方法非常简单，但是当拖放发生时，似乎没有简单的方法来切换行位置

我尝试了一个

gridOptions.api.removeItems(selectedNode); 

清除电流，然后

gridOptions.api.insertItemsAtIndex(2, savedNode);

但坠落事件似乎再次阻止了这种做法。加上插入项（第一次运行时）在内部ag网格循环中倒下

---

我不希望手动重新排序网格行，然后重置网格行数据，这会有点笨重。在大多数网格上，这似乎是一个常见的请求，所以我认为可以这样做，但只是错过了相关文档。感谢您的帮助。

如果您在ag grid中找不到解决方案，那么您可以通过添加一条指令（“ngDraggable”）并将其与ag grid集成来实现这一点

请为此查找以下工作plnkr

---

希望这有帮助。

K终于有了一个角度2方法，尽管目前我不得不关闭网格上的排序和过滤

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

在网格选项中

 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;

像往常一样

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

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

注意，我们在自己的类中包装网格，以允许我们编写一组网格方法，而不是在使用网格时在应用程序上进行复制

---

我将在接下来的几天内对此进行改进，但作为一个基本操作，angular 2中的ag网格可以拖放行来对记录进行排序。

感谢您的响应，如果没有基于网格的响应，我可以尝试一下。该代码是angular JS，而我使用的是angular 2，因此可能存在兼容性问题。您好，您有完整的cod吗e？我使用的是angular 2，对我来说，Drop事件没有被触发，你知道可能有什么问题吗？（我也在尝试在同一个网格中重新排序）。你是否将相关方法添加到网格html（dragstart）=“setDrag（$event）”（dragStopped）=“dragStopped（$event）”（Dragver）=“onDragOver（$event）”（drop）=“onDrop（$event）”>将一些日志放在这些日志上，以检查它们正在启动，而问题不在其他地方。我们已经为网格编写了自己的包装，因此它可能对整个网格没有帮助。感谢您的时间。我的代码中没有这些日志；相反，我有“GeneratorWevents”（如您上面提到的）-我在其中绑定了事件。现在我尝试添加您在HTML中提到的代码；但没有成功：（.您是否为此使用了任何其他包（ag grid和ng2 ag grid除外）？得到了修复（感谢：）：添加了$event.preventDefault（）；到Dragver event private onDragOver（$event）{if（$event&&this.newDragStarted）{$event.preventDefault（）；}}很高兴您已经启动并运行了它；）