angular2 Dragula verwenden, können

Question

My angular2 dragula Setup für die mehrere tbody die nicht neu anordnen, die interessiert sind, können Sie hier: How to set up angular-quickstart with ng2-dragula

app.component.ts

import { Component } from '@angular/core'; 

import { DragulaService } from 'ng2-dragula/ng2-dragula'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Dragula Table Issue</h1> 
     <table class='container'> 
      <tbody *ngFor="let item of items; let i = index" [dragula]='"other-bag"'> 
       <tr> 
        <td>{{i}}</td> 
        <td>{{item}}</td> 
       </tr> 
      </tbody>  
     </table> 
    `, 
    viewProviders: [DragulaService], 
    styles: [`\n\ 

    `] 
}) 
export class AppComponent { 
    public items:string[]; 

    constructor(){ 
     this.items = new Array(); 
     this.items[0] = "zero"; 
     this.items[1] = "one"; 
//  this.items[2] = "two"; 
//  this.items[3] = "three"; 
//  this.items[4] = "four"; 
//  this.items[5] = "five"; 
//  this.items[6] = "six"; 
    } 

Die oben die rendert folgende HTML für die Tabelle, die zum Beispiel Zwecke ist, was ich will:

<table _ngcontent-uqa-1="" class="container"> 
      <!--template bindings={ 
    "ng-reflect-ng-for-of": "zero,one" 
}--><tbody _ngcontent-uqa-1="" ng-reflect-bag="other-bag"> 
       <tr _ngcontent-uqa-1=""> 
        <td _ngcontent-uqa-1="">0</td> 
        <td _ngcontent-uqa-1="">zero</td> 
       </tr> 
      </tbody><tbody _ngcontent-uqa-1="" ng-reflect-bag="other-bag"> 
       <tr _ngcontent-uqa-1=""> 
        <td _ngcontent-uqa-1="">1</td> 
        <td _ngcontent-uqa-1="">one</td> 
       </tr> 
      </tbody>  
     </table> 

H owever nach der ersten Zeile nach der zweiten Reihe ziehen sehen wir, dass die Tabellenzeile aus dem ersten tbody, in denen die tbody der zweiten bewegt:

<table _ngcontent-uqa-1="" class="container"> 
      <!--template bindings={ 
    "ng-reflect-ng-for-of": "zero,one" 
}--><tbody _ngcontent-uqa-1="" ng-reflect-bag="other-bag"> 

      </tbody><tbody _ngcontent-uqa-1="" ng-reflect-bag="other-bag"> 
       <tr _ngcontent-uqa-1=""> 
        <td _ngcontent-uqa-1="">1</td> 
        <td _ngcontent-uqa-1="">one</td> 
       </tr> 
      <tr _ngcontent-uqa-1="" class=""> 
        <td _ngcontent-uqa-1="">0</td> 
        <td _ngcontent-uqa-1="">zero</td> 
       </tr></tbody>  
     </table> 

Wie verschiebe ich die um die tbody als Block eher als nur die tr?

Answer 1

Dragula funktioniert so. Wenn Sie es zu einem Tag hinzufügen, wird es Drag & Drop mit den ersten Ebene Kinder dieses Tags verwenden. In Ihrem Fall fügen Sie es der tbody hinzu, so dass es Drag & Drop mit tr verwenden wird. Sie müssen also die Drag & Drop in die Tabelle einfügen.

<table class='container' [dragula]='"other-bag"'> 
      <tbody *ngFor="let item of items; let i = index" > 
       <tr> 
        <td>{{i}}</td> 
        <td>{{item}}</td> 
       </tr> 
      </tbody>  
     </table> 

und die *ngFor ändern Ihr Problem zu lösen