Drag and Drop et réorganiser les lignes ag-grille avec angulaire 2

Question

Dans gridOptions

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

qui appelle

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

I suivre le recrord source dans le procédé onDrag

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

onDragOver comme d'habitude

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

Mes options de grille:

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

J'ai essayé d'obtenir la fonctionnalité glisser-déposer à l'aide du code ci-dessus: mais lorsque je tente d'obtenir l'index de ligne de source pendant la traînée de démarrage ($ event.target .attributes.row.value) je n'ai pas pu obtenir la ligne dans le $ event.target.attributes.

Et aussi je suis à défaut d'obtenir l'indice de ligne de destination (event.target.offsetParent.attributes.row.value $).

S'il vous plaît aidez-moi à résoudre ce problème.

Il est très appréciable si par exemple fournir plunker.

Answer 1

j'ai pu faire le Reording en fonction de glisser-déposer fonct. Voici mon code pour cela. J'ai sauté une modification lorsque la grille est triée par une colonne (le glisser-déposer n'aura aucun effet visuel à cause du tri).

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 
      } 

     }; 
    }