how to prevent pane from sliding while swiping in content section about panes

[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: []};
};

[roman-rr]

Done with new setting property dragByCursor

[roman-rr]

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

[roman-rr]

@newfield86 scheduled for next version :)

[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?

[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

[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!

[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!