0

我从数组中自动生成不同的容器，这是我的 app-component.ts：

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

第二个数组：

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>

这些生成一个 5 列，左侧为 columnsItem，右侧为 4 列，我想允许从左列拖动元素到右侧的每个列，我使用 html 标签创建标题和类“no-拖动”使标题不可拖动，两个问题：

  • 我怎样才能固定标题元素，我的意思是防止将元素放在标题上，我只想将元素放在标题上方？
  • 另外我想为右边的每个容器只放置一个元素，右边的每个容器应该只有一个元素，限制放置多个元素。

谢谢

4

0 回答 0