Unable to Make draggable="true" Work on Tab Component

[PlusoneWang]

I'm developing a Vue application and want to enable users to change the order of Tabs through drag and drop by setting draggable="true" on the component. However, it doesn't seem to work as expected. Can anyone advise on how to resolve this?

Here's a snippet of my code:

<template>
  <TabGroup>
    <TabList>
      <Tab draggable="true">Tab 1</Tab> <!-- draggable not working -->
    </TabList>
    <TabPanels>
      <TabPanel>
        <div draggable="true">Content for Tab 1</div> <!-- draggable working -->
      </TabPanel>
    </TabPanels>
  </TabGroup>
</template>

<script setup>
  import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
</script>

I noticed the following code within the Tab component, and I'm not sure if this could be causing the issue with drag not functioning:

function handleMouseDown(event: MouseEvent) {
  event.preventDefault()
}

Does the event.preventDefault() call in the handleMouseDown function interfere with the draggable functionality? How can I get the drag and drop feature working for the component under these circumstances?

I appreciate your time and assistance in advance. Thank you!

[vran-dev]

hi, do you find solutions for this problem?

I also encountered the same problem, even if I upgraded to the latest 2.0 version, the problem still exists.

[PlusoneWang]

Hi! No, unfortunately, I haven't found a solution to make draggable="true" work directly with the Headless UI's Tab component. Instead, I opted to use the Radix Vue Tab component, which supports draggable tabs. This decision did lead to mixing two different Vue UI libraries in my project, so it's something that needs careful consideration. In my case, the project isn't very complex, and I generally prefer using Headless UI, so there haven't been any significant issues so far.

If anyone else has managed to get draggable tabs working with Headless UI or another workaround, I'd love to hear about it!