Laggy when using dnd-sortable on a Reactive Form with inputs

[robvaneck]

Hi,

Thank you for this plug-in, it's cool. I found it to be laggy when adding a dnd-sortable in a Reactive Form with a *ngFor loop, within each loop are a few inputs. These inputs are causing the dragging to lag, because when I remove the inputs, it works as expected.

Are you aware of this?

code format like

<form [formGroup]="myForm"
      (ngSubmit)="submit(myForm)"
      #form
      class="form"
      novalidate>
      
    <div formArrayName="persons"
        dnd-sortable-container
        [sortableData]="myPersons.controls">
        <div class=""
            *ngFor="let ride of myPersons.controls; let i=index"
            [formGroupName]="i"
            dnd-sortable
            [sortableIndex]="i"
            (onDragStart)="onDragStart($event, person)"
            (onDropSuccess)="onDragEnd($event, person)" >
            
            <div class="col col-date">
                <div class="input-group" #datepickerInputGroup>
                    <input class="form-control"
                            id="date{{i}}"
                            formControlName="date"
                            ngbDatepicker
                            #d="ngbDatepicker"
                            (focus)="closeAddresses()"
                            placeholder="DD/MM/JJJJ"
                            [ngClass]="{'is-invalid': person.controls['date'].errors && 
                                                      (person.controls['date'].touched ||
                                                      person.controls['date'].dirty) }">
            
                    <button class="input-group-addon"
                            (click)="toggleDatepicker(d, datepickerInputGroup);"
                            (focus)="closeAddresses()"
                            type="button">
                        <svg class="icon icon-calendar-icon icon-18" *ngIf="!datepickers[d]">>
                            <use xlink:href="./assets/icons/symbol-defs.svg#icon-calendar-icon"></use>
                        </svg>
                    </button>
                </div>  
                <div class="invalid-feedback d-flex"
                        *ngIf="person.controls['date'].errors &&
                            (person.controls['date'].touched ||
                            person.controls['date'].dirty)">
                    <p *ngIf="person.controls['date'].errors.required">Datum is verplicht</p>
                    <p *ngIf="person.controls['date'].errors.ngbDate">Uw invoer is geen datum</p>
                </div>
            </div>
        </div>
    </div>
</form>
`

Kind regards,
Rob

[abhishekdgeek]

Not just Reactive Form but on any nested structure. :(

#224 - Performance Issue: Drag/Drop is too slow with large array sets. #205 - Slow sorting of large arrays.

[robvaneck]

@abhishekdgeek I used SortableJS for ng2 in the end. Fast

[abhishekdgeek]

@borriej any tip on how to use this plugin? You are talking about https://github.com/SortableJS/angular-sortablejs?

I am not able to understand their guide and basically how to transfer data which is nested JSON.

Thanks, Abhishek.

[balazsnemeth]

This seems really a serious issue for sortable