Reorder mat-table rows with angular material's drag-and-drop

Question

Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples

The documentation deals with rearranging items

Answer 1

I was using MatTableDataSource for my dataSource so my solution was this:

• Importing CdkDragDrop in the component and in the component.module.ts

• Adding @ViewChild('table') table: MatTable; to the component.ts.

• In the HTML add:

  At the *matRowDef you need to add this :
  Then in the component.ts I made the drop event:
  drop(event: CdkDragDrop) {
    const previousIndex = this.dataSource.data.findIndex(row => row === event.item.data);
    moveItemInArray(this.dataSource.data,previousIndex, event.currentIndex);
    this.dataSource.data = this.dataSource.data.slice();
  }
  
  
                                                          
  
                
                  
                  0
                
                     
                  
                 讨论(0)
                
                                                    
                
                
  
                            
               
         
            
                
                                         
  
       查看其它5个回答
  
  
              
  
                      
  
  
  
                 
              
  
      发布评论:
      
  
           
                          
      
      
  提交评论 
    
    
  
                      
                      
  
                      
  
                          
  
                          
                           加载中...
                          
                      
                  
  
            
  
              
              
  
                
                
  
              
      
  
  
                                   
                
              
                            
      
  
          
           
  
                  验证码
                  
  
                    
                  
                  
  
                     看不清?
                  
                
                                    
  
                      
     
                   
               
                
  提交回复
              
            
          
  
            
   
       
   
  
          
  热议问题