Element-plus tabs not working with draggable

[soufian-madi]

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md

Jsfiddle link

https://jsfiddle.net/madisofian/0cdszv9o/

Step by step scenario

I tried adjusting the example File where Element ui collapsed component is used with draggable to work with el-tabs instead. the tabs are rendered correctly and work but somehow they are not draggable at all. (i couldn't make it run in Jsfiddle but the code i changed is there)

Actual Solution

el-tab-pane is not dragging or dropping when created by draggable

Expected Solution

something similar to the solution from vue 2 and sortable i found Here

Update

While debugging i noticed that the data-draggable attribute is only set to the tab content (text) and not to the tabs themselves see image.

[Cheerwhy]

The "el-tabs" tag will create multi different children . So use sortable.js instead https://github.com/SortableJS/Sortable

import Sortable from "sortablejs";
  export default {
    setup(){
      onMounted(() => {
        const el = document.querySelector(".el-tabs__nav"); // Must get this DomElement,
        Sortable.create(el, {
        /* see details in sortable options */
        animation:150 // if you want animation
      });
   }
}