Ngx chips : Get current order after dragging

Question

I enabled dragzone attribute and chips added are now draggable. So after dragging, how do we get current order of chips ?

Answer 1

As always in Angular you can use two way binding. In fact you can get the order from the binded ngmodel value.

Check the examples code from the demo page.

Example for Drag and drop inside an input:

    <div>
        <h3>Drag and drop</h3>
        <tag-input  [(ngModel)]="dragAndDropExample"
                    [modelAsStrings]="true"
                    [dragZone]="'zone1'"
                    [editable]="true">
        </tag-input>
    </div>

Example code for Drag and drop between inputs:

    <div>
        <h3>Drag and drop (as string) can be moved to another tag-input (to the next)</h3>
        <tag-input  [(ngModel)]="dragAndDropStrings"
                    [modelAsStrings]="true"
                    [dragZone]="'zone1'"
                    [editable]="true">
        </tag-input>
    </div>

    <div>
        <h3>Drag and drop (as object) can be moved to another tag-input (to the previous)</h3>
        <tag-input  [(ngModel)]="dragAndDropObjects"
                    [dragZone]="'zone1'"
                    [editable]="true">
        </tag-input>
    </div>