javascript - Dragula 和 Angular 5 - 通过删除来更新对象位置值

Question

我有一个包含多个 div 的包，其中每个 div 都有一个项目列表，这些项目都具有相同的位置值，因此“Misc”div 包含的项目全部具有“location:misc”，“Armor”div 具有都有“位置:盔甲”等的元素。

我可以将项目排序到各自的 div 中，但我希望能够将项目拖动到另一个 div，然后相应地更改项目的位置值，但我不知道如何进行此操作。

我试过this solution但我一定没有正确理解它。

代码片段 - 这只是控制台“未定义”

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

我意识到我可以通过以下方式获取出发地和目的地:

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]);
});

并查找目的地的 ID，例如，使用:

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