Drop to predefined columns?

[malinga91]

I'm working on a form builder. Drag & drop done using Dragular. Questions are predefined and <app-question [question]="question"></app-question> handle the question.

• New row can be created using button. User has to select number of columns for that row.
• Then rowsList array will be updated with empty columns.
• I need to let users to drag questions into that columns.
• Currently when i drop question to row another column created. Instedad of that I need to drop into generated column

rowsList = [
  {
    "columns": [
      { question : column_two},
      { another_question : column_three },
  {
    "columns": [
      {},
      {},
      {}
    ]
  }
]

COMPONENT.HTML

<div [dragula]="'bag'" [dragulaModel]="rowsList">
    <div *ngFor="let row of rowsList; let i = index;">
      <div class="form-row" [dragula]="'bag2'" [dragulaModel]="row.columns">

        <div class="col test" *ngFor="let question of row.columns">
          <ng-container *ngIf="question.label">
            <app-question [question]="question"></app-question>
          </ng-container>
        </div>

      </div>
    </div>
  </div>

COMPONENT.TS

 this.dragulaService.setOptions('bag', {
      invalid: function (el, handle) {
        return (el.className == "col");
      }
    });

this.dragulaService.setOptions('bag2', {
      accepts: function (el, target, source, sibling) {
            return target.className === 'col'
       }
    })