@dosu

onEnd doesn't exist in what gets returned from useDraggable, from the index.d.mts

declare function useDraggable(target: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>, options?: UseDraggableOptions): {
    position: vue.Ref<{
        x: number;
        y: number;
    }, Position | {
        x: number;
        y: number;
    }>;
    isDragging: vue.ComputedRef<boolean>;
    style: vue.ComputedRef<string>;
    x: vue.Ref<number, number>;
    y: vue.Ref<number, number>;
} | {
    position: vue.Ref<{
        x: number;
        y: number;
    }, Position | {
        x: number;
        y: number;
    }>;
    isDragging: vue.ComputedRef<boolean>;
    style: vue.ComputedRef<string>;
    x: vue.Ref<number, number>;
    y: vue.Ref<number, number>;
};
type UseDraggableReturn = ReturnType<typeof useDraggable>;

i'm running on version 12.5.0, latest at the time of writing

The useDraggable function does not return an onEnd method directly. Instead, the onEnd callback is part of the UseDraggableOptions that you pass to useDraggable. To programmatically trigger the end of a drag operation, you would need to handle this within the onEnd callback itself.

Here's how you can set it up:

1. Define the onEnd callback within the options you pass to useDraggable.
2. Use an event listener to detect the Esc key press and manually handle the logic to stop dragging.

Here's an example:

<template>
  <!-- Your template here -->
</template>

<script>
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

export default {
  setup() {
    const position = ref({ x: 0, y: 0 })
    const isDragging = ref(false)

    const { style } = useDraggable(position, {
      onStart() {
        isDragging.value = true
      },
      onMove() {
        // Handle move logic
      },
      onEnd() {
        isDragging.value = false
        // Handle end logic
      },
    })

    const handleKeyDown = (event) => {
      if (event.key === 'Escape' && isDragging.value) {
        // Manually handle the end of the drag
        isDragging.value = false
        // Perform any additional cleanup or state reset here
      }
    }

    window.addEventListener('keydown', handleKeyDown)

    return {
      position,
      style,
    }
  },
}
</script>

In this setup, the isDragging ref is used to track the dragging state, and the onEnd logic is manually handled when the Esc key is pressed. This approach allows you to effectively stop the drag operation and perform any necessary cleanup.

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

in the end i gave up on that feature, it was more of a nice to have kinda thing, moved on to other features, maybe will be back to it to it to try again. In the meantime, if someone tries this out and it works i'll mark it as answer