Can I use UseDraggable on a component?

[danieldilly]

I'm able to use UseDraggable when applied to normal HTML element such as a div.

However, the utility does not work when I try to use it on a Vue component, such as Quasar's QCard component:

import { useDraggable } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
  preventDefault: true
})

Works:

<div ref="el" :style="style" style="position :fixed">test</div>

Doesn't work

<q-card ref="el" :style="style" style="position :fixed"><q-card-section>test</q-card-section></q-card>

Error:

dex.mjs:2423 Uncaught TypeError: toValue(...).getBoundingClientRect is not a function
    at HTMLDivElement.start (index.mjs:2423:34)
start @ index.mjs:2423

I did get it working with the component variant (from @vueuse/components), but I still wonder if there's a way to get it to work using this method.

[danieldilly]

I seem to have another issue. When using the Draggable component, the @start, @EnD, and @Move events don't seem to function at all:

<Draggable :initialValue="{ x: 10, y: 10 }" style="position: fixed" :handle="handle" @start="onStart" @end="onEnd"
    @move="onMove">
    ```

[Alfred-Skyblue]

I have submitted a PR to deal with this issue.

[Alfred-Skyblue]

useDraggable only accepts the HTMLElement type, you cannot pass an instance of a vue component to it, you can pass its root element to useDraggable in the component that needs to be dragged.