Dragula и Angular 5 — обновить значение местоположения объекта, перетащив

У меня есть сумка с несколькими разделами, где каждый раздел имеет список элементов, которые имеют одинаковое значение для местоположения, поэтому в разделе «Разное» есть элементы, у всех которых есть местоположение: разное, в разделе «Доспехи» есть элементы, у всех которых есть местоположение: броня и т. д. .

Я могу сортировать элементы по соответствующим 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);
});

typescript javascript angular html ng2-dragula
person av0000    schedule 02.05.2018    source источник
comment
[attr.data-id]="bag-equipment" означает, что у вас есть свойства bag и equipment и вы просто выполняете вычитание. Попробуйте [attr.data-id]="'bag-equipment'" (обратите внимание на кавычки) или attr.data-id="bag-equipment"   -  person yurzui    schedule 02.05.2018
comment
Спасибо! Я получаю тот же результат, но я не знал этого о вычитании.   -  person av0000    schedule 02.05.2018
comment
Можете ли вы создать небольшую реплику, чтобы воспроизвести вашу проблему?   -  person yurzui    schedule 02.05.2018

Ответы (1)


arrow_upward
1
arrow_downward

Я понял, что могу получить источник и пункт назначения с помощью:

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

И найдите идентификатор пункта назначения, например, с помощью:

console.log(value[2]['id']);
person av0000    schedule 02.05.2018