0

我的 angular2 dragula 设置可以在这里找到： 如何使用 ng2-dragula 设置 angular-quickstart

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>

但是，在将第一行拖到第二行之后，我们看到第一个 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 呢？

4

1 回答 1

4

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

于 2016-10-18T07:07:14.133 回答