mobile safari fires TypeError: undefined is not an object (evaluating 'event.targetTouches[0].clientX') using nested draggle

[Horst1102]

Hi,

using nested dragula in my mobile application. Works fine on android but not on iOS. When dragging the parent-container around the following error appears: TypeError: undefined is not an object (evaluating 'event.targetTouches[0].clientX')

Therefore the twowaybinding of of my dragulamodel is not working anymore.

My HTML is something like the following

                <ion-col [size]="size" *ngFor=" let group of groups, let groupIndex = index">

                    <ion-row style="margin-left: 5px" *ngIf="group.name && showGroupHeader || edit">
                        <ion-col class="ion-text-left groupName">
                            {{group.name}}
                        </ion-col>
                        <ion-col size="4" *ngIf="edit" class="ion-text-right">
                            <fa-icon class="groupNameIcon fa-sm" icon="pen"
                                     (click)="changeGroupName(group)"></fa-icon>
                            <fa-icon class="groupNameIcon groupNameIconPadding fa-sm" icon="trash-alt"
                                     (click)="deleteGroup(group)"></fa-icon>
                        </ion-col>
                    </ion-row>

                    <div style="margin-left: 5px" *ngIf="!group.name">&nbsp;</div>

                    <div dragula="DRAGULA_CONTAINER_ITEMS" [(dragulaModel)]="group.items">

                        <ion-card *ngFor="let item of group.items"
                                  [color]="item.color ? item.color.key : col.colorList[0]"
                                  (click)="!edit ? openBrowser(item): false"
                                  (press)="authenticationState ? onPress($event) : null">
                            <ion-card-content class="cardContent">
                                <ion-card-title class="alarmsHead">
                                    {{item.name}}
                                </ion-card-title>
                                <p *ngIf="edit" class="ellipsis">
                                    {{item.link}}
                                </p>
                            </ion-card-content>
                            <ion-row class="cardRow">
                                <ion-col class="ion-text-left">
                                    <ion-row>
                                        <div *ngIf="edit">
                                            <ion-checkbox (ngModelChange)="toggleOption(item)"
                                                          [(ngModel)]="item.isChecked">
                                            </ion-checkbox>
                                            <div style="position: absolute; top: 10px; left: 50px"
                                                 (click)="openAddLinkModal('edit_dashboard', item, group.name)">
                                                <fa-icon class="fa-lg " slot="start" icon="pen"></fa-icon>
                                            </div>
                                        </div>
                                    </ion-row>
                                </ion-col>
                                <ion-col class="ion-text-right">
                                    <div>
                                        <fa-icon class="fa-2x" slot="start" icon="{{item.icon}}"></fa-icon>
                                    </div>
                                </ion-col>
                            </ion-row>
                        </ion-card>
                        <div *ngIf="group.items && group.items.length < 1 ">&nbsp;</div>
                        <!-- Placeholder for empty group -->
                    </div>

                </ion-col>
            </div>```

and in my *.ts file: 

```this.dragulaService.createGroup('DRAGULA_CONTAINER_GROUPS', {
            invalid(el, handle) {
                return el.tagName === 'DIV';
            },
            moves: el => this.edit
        });

        this.dragulaService.drag('DRAGULA_CONTAINER_GROUPS')
            .subscribe(({name, el, source}) => {
                this.dragging = true;
            });

        this.dragulaService.dragend('DRAGULA_CONTAINER_GROUPS')
            .subscribe(({name, el}) => {
                this.dragging = false;
                console.log('dragend', this.groups);

                this.storageService.updateGroupItems(this.groups);
            });

        this.dragulaService.createGroup('DRAGULA_CONTAINER_ITEMS', {
            moves: el => this.edit
        });

        this.dragulaService.drag('DRAGULA_CONTAINER_ITEMS')
            .subscribe(({name, el, source}) => {
                this.dragging = true;
            });

        this.dragulaService.dragend('DRAGULA_CONTAINER_ITEMS')
            .subscribe(({name, el}) => {
                this.dragging = false;
                this.storageService.updateGroupItems(this.groups);
            });```

Maybe I am doing something wrong or there must be a bug. It works in Chrome and on native android device.