Dragula and ion-col

Ionic Framework
1

Hi,

i want to use dragula to drag groups around. The groups contain items, so i want to drag the items around the groups. This works fine. Now i want to display the groups in a row or a grid - they should fit in the space of the page e.g. resposive.

this.dragulaService.createGroup('groups', {
        invalid(el, handle) {
            return el.tagName === 'DIV';
        }
    });

 <ion-row>
    <div [dragula]='"groups"' [dragulaModel]='groups'>
        <ion-col size="3" *ngFor="let group of groups;let index = index">
            <ion-header>{{ group.name }}</ion-header>
            <div [dragula]='"items"'>
                <ion-card *ngFor="let item of group.items">
                    <ion-card-subtitle>{{ item.name }}</ion-card-subtitle>
                </ion-card>
            </div>
        </ion-col>
    </div>
</ion-row>

This leads to this

But i wanto to have it like this:

See here for how it should be displayed

If i delete the first with the dragula container it does not work anymore but it displays correct. So what to do?

2

Hello,

Just add CSS like this in your main div

<div [dragula]='"groups"' [dragulaModel]='groups'  style="display: inherit;"></div>

hope it helps you :slight_smile:

1 Like
3

Thank you very much!

4

Hmm… now the array doesn’t update anymore after dragend. The order doesn
't change. You have any idea?