vueuse / gesture

🕹 Vue Composables making your app interactive
https://gesture.vueuse.org
MIT License
353 stars 18 forks source link

prevent scroll on drag doesn't work #3

Closed davay42 closed 3 years ago

davay42 commented 3 years ago

I have an app that uses drag to adjust the volume of oscillators. I use drag handler to get the x and y difference. It works fine on desktop, but I can't prevent my ipad safari from scrolling. Here are my directives

  v-drag="dragHandler",
  :drag-options="dragOptions",

the options

const dragOptions = reactive({
  filterTaps: true,
  preventWindowScrollY: true,
  delay: 0,
  eventOptions: {
    passive: false
  }
})

the handler

const dragHandler = (dragEvent) => {
  dragEvent.event.preventDefault()
...

But still it scrolls vertically when a cell is dragged.

The actual component in the repo https://github.com/davay42/pitch-table/blob/master/src/components/table/cell.vue

https://user-images.githubusercontent.com/6184449/115973456-c1fc2180-a55d-11eb-87f9-95a1f4551194.mov

Tahul commented 3 years ago

Hey :)

Maybe a this can help: https://github.com/vueuse/gesture/blob/92ac1e9c2daac59fbe1455f32ab9eab1098863ab/docs/.vitepress/components/demos/PinchExample.vue#L58

It is how I prevent the window to be scrolled on the Pinch example from the docs.

Maybe this is close to what you are trying to achieve.

davay42 commented 3 years ago

Nice! I'll try that! Thanks!

zlt110168 commented 2 years ago

drag-options really don't work,Is it a bug