Dragula and Angular 5 - update object location value by dropping

Question

I have a bag with several divs where each div has a list of items that all have the same value for location, so the "Misc" div has items that all have "location: misc", the "Armor" div has items that all have "location: armor", etc.

I can sort the items into their respective divs but I want to be able to drag an item to another div and then change the item's location value accordingly, but I have no idea how to go about this.

I tried this solution but I must not be understanding it correctly.

Code Snippet - this just consoles 'undefined'

HTML:

    <div 
    [dragula]='"bag-equipment"'
    [dragulaModel]="equipmentBagOfHolding"
    [attr.data-id]="bag-equipment"
    >
    <mat-card 
        *ngFor="let item of equipmentBagOfHolding"  
    >
        {{ item.name }} 
    </mat-card>
</div> 

<div 
    [dragula]='"bag-equipment"' 
    [dragulaModel]="equipmentArmor"
    [attr.data-id]="bag-equipment"
>
    <mat-card 
        *ngFor="let item of equipmentArmor"  
    >
        {{ item.name }} 
    </mat-card>
</div>

TS:

dragulaService.drop.subscribe(value => {
    const [bagName, e, el] = value;
    console.log('id is:', e.dataset.id);
});

Answer 1

I realized that I can get the origin and destination with:

this.dragula.drop.subscribe(value => {
    //Bag       
    console.log(value[0]);

    // What is moved
    console.log(value[1]);

    // Destination
    console.log(value[2]);

    // Origin
    console.log(value[3]);
});

And find the id, of the destination for example, with:

console.log(value[2]['id']);