0

興味のある人のための私の angular2 dragula セットアップは、ここにあります: How to setup 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>

ただし、最初の行を 2 行目の後にドラッグすると、最初の tbody のテーブル行が 2 番目の 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>

では、tr だけでなく tbody をブロックとして移動するにはどうすればよいでしょうか。

4

1 に答える 1

4

ドラグラはこんな感じで動いています。タグに追加すると、そのタグの最初のレベルの子でドラッグ アンド ドロップが使用されます。あなたの場合、それをに追加するので、ドラッグアンドドロップを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 に答える