angular2使用Dragula不能重新排列多個TBODY的

Question

我angular2 dragula設置爲那些有興趣誰可以在這裏找到： 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"; 
    } 

呈現下面的HTML表格，這是我想要的例如目的：

<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 H但是我們在第二排後拖動第一行後看到，從第一TBODY的錶行，移動到第二的的TBODY：

<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> 

那麼，如何移動TBODY的周圍爲塊，而不只是tr的？

Answer 1

Dragula正在如此工作。如果您將其添加到代碼中，它將使用將拖放到該代碼的第一級孩子。在你的情況下，你將它添加到tbody，所以它會使用拖放與tr的。所以你需要添加拖放到表中。

<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> 

，改變*ngFor解決您的問題