how to prevent pane from sliding while swiping in content section

[jaimyborgman]

I'm using your plugin inside my vue js ionic app it works nice but I'm curious if there is a way to prevent the drawer from sliding up and down while I'm swiping any ion-item's currently the pane is going up and down if you do not swipe in a straight line (which isn't natural of course) so I was thinking to combine the @ionDrag on the ion-item-sliding element and then trigger something on your cupertino pane that it should ignore any swipe events or at least stop moving

or is there another option which maybe could be helpful in this situation? looking forward to it tho!

[roman-rr]

@jaimyborgman Thanks for issue.
Please record a video with bug demonstration.

[jaimyborgman]

@roman-rr sure see the video here:
https://streamable.com/6z7ceb

[roman-rr]

@jaimyborgman
Pushed new version 1.1.37 with two new methods: disableDrag(), enableDrag()

Try to implement like this:

<ion-item-sliding (touchend)="touchEnd($event)" (ionDrag)="ionDrag($event);">
...
</ion-item-sliding>

public pane: CupertinoPane;
constructor() { ... }
ionDrag = (e) => this.pane.disableDrag();
touchEnd = (e) => this.pane.enableDrag();

[jaimyborgman]

thanks for this @roman-rr it is working but not as smooth as i hoped it would be, sometimes it is still a little glitchy but way better then before!

i'm also working with ionic in combination with vue js and as per the new version of ionic there is only an ionDrag event possible currently combined it like this

const drawer = this.$parent.drawer
if (drawer.disableDragEvents) return
drawer.moveToBreak('top')
drawer.disableDrag()
setTimeout(() => {
    drawer.enableDrag()
}, 500)

which is doing the job for now so thanks!

besides this; is there an option to only listen to drag event on the pane only while touching the "draggable" element of it? so that the pane only reacts on dragging from there up and down? if it isn't it would be nice to have that as a configuration option maybe? so you are able to say like drag events on the whole pane or just the draggable part?

[roman-rr]

@jaimyborgman glitchy is not satisfaction. Quality first. :)

I guess this is exactly what you need:

<ion-item-sliding         
        [disabled]="slideDisabled"
        (touchmove)="touchMove($event)"
        (touchend)="touchEnd($event)" 
        (touchstart)="touchStart($event);">
...
</ion-item-sliding>

private slideDisabled: boolean = false;
private slideChecked: boolean = false;
private steps: {y: number[], x: number[]} = {y: [], x: []};
constructor() { ... }
touchStart = (e) => {
    this.steps.y.push(e.targetTouches[0].screenY);
    this.steps.x.push(e.targetTouches[0].screenX);
};
  
touchMove = (e) => {
    if (this.slideChecked) return;

    const coords = {
      x: e.targetTouches[0].screenX, 
      y: e.targetTouches[0].screenY
    };
    const delta = {
      x: coords.x - this.steps.x[this.steps.x.length - 1], 
      y: coords.y - this.steps.y[this.steps.y.length - 1]
    };

    if (Math.abs(delta.y) > Math.abs(delta.x)) {
      this.slideDisabled = true;
    } else {
      this.locationsPane.disableDrag();
    }
    this.slideChecked = true;
};

touchEnd = (e) => {
    this.slideDisabled = false;
    this.slideChecked = false;
    this.locationsPane.enableDrag();
    this.steps = {x: [], y: []};
};

[jaimyborgman]

@roman-rr thanks for the solution

is there also an option possible to only listen to drag events on the draggable item?
would be a nice addition instead of listening on the whole drawer

[roman-rr]

@jaimyborgman Currently don't have this option. I will include this option when at least 2 requests will collected here.

[wedoodevelopment]

@roman-rr thanks for the solution

is there also an option possible to only listen to drag events on the draggable item?
would be a nice addition instead of listening on the whole drawer

That would be indeed a nice addition!

[roman-rr]

@newfield86 scheduled for next version :)

[roman-rr]

Done with new setting property dragByCursor

[jaimyborgman]

many thanks @roman-rr and @newfield86

[roman-rr]

Update notes for version > 1.1.6

• Removed dragByCursor options from settings
• Added dragBy options to settings.

Now you can bind drag gestures only for cursor by adding to settings:

let settings: CupertinoSettings = {
  ...
  dragBy: ['.pane .draggable']
};

[jaimyborgman]

hi @roman-rr thanks for the update!