Feature Request: emit events out of Draggable component

[agm1984]

Hello, great library thank you very much for your services.

I am finding myself desiring to listen to events such as drag-start and drag-end in order to programmatically control a hover tooltip that should disappear while you are dragging a row. Without that, while the mouse is hovering the row, the tooltip stays open leading to bad UX because the mouse is technically still hovering the row while it is moving around.

Here is an example of what I would like:

const isDragging = ref(false);

const handleStart = () => {
    isDragging.value = true;
};

const handleEnd = () => {
    isDragging.value = false;
};

...

<Draggable v-model="localColumns" transition="100" @drag-start="handleStart" @drag-end="handleEnd">
    <template #item="{ item }">
        <div class="draggable-item flex items-center justify-between hover:cursor-grab active:cursor-grabbing pt-2">
            <div class="flex items-center">
                <Checkbox v-model="item.is_visible" binary />

                <span class="ml-2">{{ item.label }}</span>
            </div>

            <Tooltip
                class="active:cursor-grabbing"
                label="Re-order"
                :show="isDragging ? false : null"
            >
                <i class="pi pi-bars text-grey-600"></i>
            </Tooltip>
        </div>
    </template>
</Draggable>

Tooltip is just a wrapper around vue3-popper so show=true means show, false means hide, and null means show on hover.

I might be able to figure out some other way to listen to these events, but it looks like the library is already emitting those events from within, so it would be nice to expose them out of the root component.

Thanks, have a good day.

Side note, but I'm now still examining the library code, perhaps the item template provides these events in the slot I haven't confirmed yet.