使用Dragula can的angular2'；t重新排列多个tbody'；s

我为感兴趣的人提供的angular2 dragula设置可在此处找到：

应用程序组件.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";
    }

从'@angular/core'导入{Component}；
从“ng2 dragula/ng2 dragula”导入{DragulaService}；
@组成部分({
选择器：“我的应用程序”，
模板：`Dragula表格问题
{{i}
{{item}}
`,
viewProviders:[DragularService]，
样式：[`\n\
`]
})
导出类AppComponent{
公共项目：字符串[]；
构造函数（）{
this.items=新数组（）；
此。项[0]=“零”；
此。项目[1]=“一”；
//此.项目[2]=“2”；
//此.项目[3]=“三”；
//此.项目[4]=“四”；
//此.项目[5]=“五”；
//此.项目[6]=“六”；
}

上面为表呈现了以下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>

0
零
1.
一

但是，在将第一行拖到第二行之后，我们会看到第一个tbody的表行被移动到第二个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>

1.
一
0
零

---

那么，如何将tbody作为块而不是仅仅作为tr移动呢？

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>

{{i}
{{item}}

---

并更改

*ngFor

以解决您的问题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>

{{i}
{{item}}

并更改

*ngFor

以解决您的问题