angular2 using Dragula can't reorder multiple tbody's

Question

My angular2 dragula setup for those who are interested can be found here: 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";
    }

The above renders the following html for the table, which for example purposes is what I want:

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

However after dragging the first row after the second row we see that the table row from the first tbody, is moved into the the tbody of the second:

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

So how do I move the tbody's around as a block rather than just the tr's?

Answer 1

Dragula is working like this. If you add it to a tag, it will use drag and drop with the first level children of that tag. In your case you add it to the tbody, so it will use drag and drop with tr's. So you need to add the drag and drop to the table.

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

and change the *ngFor to solve your problem