使用 angular 2 拖放并重新排列 ag-grid 中的行答案

【问题标题】：Drag and Drop and reorder the rows in ag-grid with angular 2使用 angular 2 拖放并重新排列 ag-grid 中的行
【发布时间】：2017-08-04 11:51:51
【问题描述】：

在网格选项中

     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 像往常一样

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

我的网格选项：

commonGridOptions: any = {
        enableColResize: true,
        enableSorting: false,
        enableFilter: false,
        groupHeaders: true,
        rowHeight: this.gridRowHeight,
        suppressRowSelection: false,
        rowSelection: 'single',
        suppressCellSelection: true,
        suppressRowClickSelection: true,
        DragAndDrop:false,
}

我尝试使用上面的代码来实现拖放功能：但是当我尝试在开始拖动（$event.target.attributes.row.value）时获取源行索引时，我无法获取 $event.target.attributes 中的行。

而且我也未能获得目标行索引 ($event.target.offsetParent.attributes.row.value)。

请帮我解决这个问题。

如果提供 plunker 示例，非常值得赞赏。

【问题讨论】：

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

【解决方案1】：

我能够基于拖放功能进行重新排序。这是我的代码。当网格按列排序时，我跳过了修改（由于排序，拖放不会有任何视觉效果）。

processRowPostCreate: (params) => {
        params.eRow.draggable = true;
        params.eRow.ondragstart = (event: DragEvent) => {
            this._newRowIndex = params.rowIndex;
            this._currentRowIndex = params.rowIndex;
        };
        params.eRow.ondragenter = (event: DragEvent) => {
            this._newRowIndex = params.rowIndex;
        };
        params.eRow.ondragend = (event: DragEvent) => {
            let sortmodel = this.gridOptions.api.getSortModel();
            if (sortmodel.length === 0 && this._newRowIndex !== this._currentRowIndex) {
                let record = params.node.data;
                this.handleRearrangement();
                this.records.splice(this._newRowIndex, 0, this.records.splice(this._currentRowIndex, 1)[0]);
                this.gridOptions.api.removeItems([params.node], false);
                this.gridOptions.api.insertItemsAtIndex(this._newRowIndex, [record], false);
            } else {
                this._newRowIndex = this._currentRowIndex; // just to be sure
            }

        };
    }

【讨论】：