vueuse / gesture

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

onDrag (in useGesture) fires just a few times and lags #28

Open KamilStehlicek opened 8 months ago

KamilStehlicek commented 8 months ago

When I use onDrag like following:

useGesture({
  onDrag: dragHandler
}, {
  domTarget: image
})

with following handler:

const dragHandler = ({ movement: [x, y], dragging }) => {
  if(dragging) {
    console.log("moving")
    console.log({ x, y })
    imageConfiguration.value.top += y
    imageConfiguration.value.left += x
  }
}

the dragging event fires only about 2 to 4 times and doesnt continue.

For example when i use standart eventListener to the same element, the event fires for each pixel that I dragged. But here it completely lags and I cant use it.

Can someone help me with what am I doing wrong? Or do I misunderstand the usage?

For the whole picture, I use then the imageConfiguration to create style for the element I want to drag ->

const imageStyle = computed(() => {
  return {
    'top': imageConfiguration.value.top.toString() + 'px',
    'left': imageConfiguration.value.left.toString() + 'px',
  }
})
KamilStehlicek commented 8 months ago

Update: the example used works, but under verystrange conditions. It works, if I double tap the wanted object and I have to literally push the trackpad. I cannot just double-tap it...

And what is also strange - demo "MultiGesture.vue" works for me just fine without any mistakes...but the code is same.