Adding drag drop functionality in Vue Splitpanes

Question

I am trying to add Drag-drop functionality in Vue Splitpane. I was trying several drag-drop packages i.e. vue-smooth-dnd, Vue.Draggable, etc. But, those dnd packages were conflicting with the splitpane package as it strictly maintains the structure such as:

<splitpanes>
    <pane> 
    </pane>
</splitpanes>

So, I was looking for options of adding drag-drop as directive to the element. I have found this, vue-draggable package and implemented it. Drag-drop is working now but it can't drag the splitpanes__splitter div after the <pane> element (div.splitpanes__pane). So, resizing option of the pane is not moving along the pane and that's why resizing option is not visible after every pane. How can make it work properly?

Codepen Demo

Answer 1

Due to how Vue works, I think you're going to really struggle getting those two components to place nice with one another.

You'll be much better off implementing your own drag+drop using the API, as in the long run, it'll be much quicker than trying, and inevitably failing, to mesh those two components together.