onTouch to have behavior like beforeMouseDown

[exrhizo]

Hi,

I am using beforeMouseDown bypass panzoom when dragging an element, I want to be able to have the same behavior in onTouch.

Currently:

function onMouseDown(e) {
  // if client does not want to handle this event - just ignore the call
  if (beforeMouseDown(e)) return;

Could something similar be done for onTouch?

function onTouch(e) {
    // let the override the touch behavior
    beforeTouch(e);

It is possible to have not just event propogation, but selective disabling of the gesture?

Thank you for the code, I'm forking something here to cover my use case :)

This seems related to:
#12

The semantics of beforeMouseDown and beforeTouch are different, I can imagine that changing this could be breaking, otherwise I would create a pull request

[BernhardBaumrock]

a huge +1

@exrhizo did you find a solution?

[BernhardBaumrock]

Ha, I looked into the code and found a solution!

Simply add event listeners to the DOM element where you use PanZoom and trigger .pause() on your desired condition on touchstart and then .resume() PanZoom on touchend:

  let $page = document.getElementById("mp-sheet");

  $page.addEventListener("touchstart", (e) => {
    if (e.target.closest(".block")) PanZoom.pause();
  });
  $page.addEventListener("touchend", (e) => {
    PanZoom.resume();
  });

  PanZoom = panzoom($page, { ... });

[joodaloop]

@BernhardBaumrock THANK YOU!!! I almost gave up on using this library because I couldn't figure out how to stop touch-based panning.

[lindsayweb]

Is there a way to modify this so it only pauses panning, but still allows zoom?

[anvaka]

@stealsocks is your case similar to what @lindsaywebstudio was asking? How did you do it?

[a1rat91]

@anvaka Bernhard Baumrock's solution doesn't work well with Angular Cdk Drag and Drop #306

can you help?