Dragula service adding last drop in the target

Question

I trying to fix an issue with an application built on angular 5.5 with dragula 1.5.0 . the code is working fine if only one drag and drop performed. though on the user interface its showing the right thing. but I am not sure how to manipulate it. here is the code.

        this.dragulaService.drag.asObservable().pipe(takeUntil(this.destroy$)).subscribe((value) => {
        const dragValue = value[1].innerText;
        const dragValues = dragValue.trim().trim('\n').split('\t');
        this.dragValue = dragValues[1];
    });

this.dragulaService.drop.asObservable().pipe(takeUntil(this.destroy$)).subscribe((value) => {
        const values = value[2].innerText;
        const dropValues = values.trim().trim('\n').split('\t');
        if (this.dragValue === dropValues[1]) {
            this.dropBeforeValue = dropValues[12];
        } else {
            this.dropBeforeValue = dropValues[1];
        } }

now when I am accessing the element after first drop its working fine as the elements are in place as per first drop. but on the second drop it also contains previous or first drop value which make dropValues array size more. is there any way that every drag and drop should only contain current values?

Thanks in advance

Answer 1

You can use dropModel to get all the information:

this.dragulaService.dropModel(this.bag)
            .subscribe(
                (value: {
                    name: string; el: Element; target: Element;
                    source: Element; sibling: Element; item: any; sourceModel: any[]; targetModel: any[]; sourceIndex: number; targetIndex: number;
                }) => {
                    ...handle it
                }));

Just don't forget to set the dragula model

<div [dragula]="bag"
     [(dragulaModel)]="someArray"