使用 Dragula 的 angular2 无法重新排序多个 tbody

Question

我为感兴趣的人设置的 angular2 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";
    }

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

然而，在将第一行拖到第二行之后，我们看到第一个 tbody 中的 table 行被移动到第二个 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.

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

使用 Dragula 的 angular2 无法重新排序多个 tbody

angular2 using Dragula can't reorder multiple tbody's

dragula

angular