Vue.draggable: Draggable not working on ElementUI tabs

[MrSimonEmms]

Jsfiddle link

https://jsfiddle.net/fozvq5wn/24/

Step by step scenario

I'm trying to wrap the Tabs from ElementIUI in draggable. My example above is based upon the example for <el-collapse>.

Actual Solution

This moves the whole tab wrapper (ie, all the tabs).

Expected Solution

I would expect this to move the individual tab

Am I doing something stupid or have I found a bug?

[bbbford]

I have the same problem and have not yet found a solution..

I suspect it is because the individual tab elements are created dynamically by the component and are nested pretty deep in there, whereas the draggable component grabs the first child element.

[MrSimonEmms]

Thanks for confirming I'm not being an idiot @bbbford (at least not in this case).

Now I know it's not me, I'll see if I can find a solution to this issue and raise a PR with a fix

[David-Desmaisons]

@riggerthegeek The main problem here is that the DOM elements are not matching the component children. As such vue.draggable can not do any magic. I guess there is any other way than using sortable lib and creating some custom logic dedicated to this component.

[charles2hang]

Works like a charm.Just use it like _Sortablejs_ in normal situation not using _Vue_.

import Sortable from "sortablejs";
......
mounted() {
  let el = document.querySelector(".el-tabs__nav");
  let sortTabs = Sortable.create(el, {
    animation: 200,
    filter: ".el-icon-close"
  });
}
......

However,you'd lose track of the array order like using _:list_ options in vuedraggable since it's immutable.
You'd have to configure some callback for _Sortable_ events,implementing mutation for certain needs.
Still,It's practical to embed _Sortable_ in _el-tabs_ like this.

[ChuckFields]

Going off of @charles2hang 's comment. I've created a working example.