Skip to content

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

@KamilStehlicek

Description

@KamilStehlicek

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',
  }
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions