0

配列からさまざまなコンテナーを自動的に生成します。これは私の app-component.ts です。

columnItems = [
        {
            name: 'Name',
        },
        {
            name: 'User'
        },
        {
            name: 'Email'
        }
    ];

2 番目の配列:

column = [
        {
            name: 'One Column',
        },
        {
            name: 'Two Column'
        },
        {
            name: 'Three Column'
        },
        {
            name: 'Four Column'
        }
    ];

私の app-component.html には、このコードがあります

<div class="wrapper_mapping">
                    <div class="container_mapping system_column" [dragula]="'mapping-columns'">
                        <h5 class="no-drag">System Columns</h5>
                        <div *ngFor="let columnItem of columnItems">{{ columnItem.name }}</div>
                    </div>
                    <div class="container_mapping" [dragula]="'mapping-columns'" *ngFor="let c of column">
                        <h5 class="no-drag" style="display: block;"> {{ c.name }}</h5>
                    </div>
                </div>

これらは、左側に columnsItem 、右側に 4 列の 5 列を生成します。左側の列から右側のそれぞれに要素をドラッグおよびドラッグできるようにしたいのですが、html タグを使用してヘッダーとクラス "no-ドラッグ」を使用すると、ヘッダーがドラッグできなくなります。2 つの質問:

  • ヘッダー要素を固定するにはどうすればよいですか?つまり、ヘッダーの上に要素をドロップしないようにするには、ヘッダーの上にのみ要素をドロップしたいですか?
  • また、右側の各コンテナーに 1 つの要素のみをドロップしたいのですが、右側のすべてのコンテナーには 1 つの要素のみを含める必要があり、複数の要素をドロップすることを制限します。

ありがとう

4

0 に答える 0