时间戳

首页 > 解决方案 > Dragula 和 Angular 5 - 通过拖放更新对象位置值

javascript - Dragula 和 Angular 5 - 通过拖放更新对象位置值

问题描述

我有一个带有多个 div 的包，其中每个 div 都有一个项目列表，这些项目都具有相同的位置值，所以“杂项”div 的项目都具有“位置：杂项”，“盔甲”div 的项目都具有有“位置：盔甲”等

我可以将项目分类到各自的 div 中，但我希望能够将项目拖到另一个 div，然后相应地更改项目的位置值，但我不知道该怎么做。

我尝试了这个解决方案，但我一定没有正确理解它。

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

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

标签： javascripthtmlangulartypescriptng2-dragula

解决方案

我意识到我可以通过以下方式获取起点和目的地：

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

推荐阅读