Vue.Draggable: problems with nesting

recursive example: https://jsfiddle.net/dede89/bfksoj5b/9/

@ctf0 Would it be possible to use your updated fiddle to create an official example for nested draggable tree? It works perfectly however it’s slightly hard to find/easy to miss (you need to dig through the github’s issues).

the reason i made the ticket is because i found lots of closed issues on the same subject, however all of the demos in those tickets have the one or same problems and couldn’t find a valid solution for any, specially that the original lib that this package is built upon doesnt have the nesting feature.

and here is a fiddle u made on another ticket, with minor cleanup https://jsfiddle.net/v8gme77z/60/

it have the issues of

• items cant be moved under eachother, only be moved outside.
• when an item is re-dragged after it was moved out of the nested menu, we get an error and everything stops working check the console on the fiddle

• items cant be moved under eachother, only be moved outside.

@VernalVessel could u show me the code for this, or even a fiddle ?

@David-Desmaisons am sorry i dont know what u mean, but this is what i have atm

@David-Desmaisons how can i fix my question like this

I have been try many times and read your documents about it , but no way to fix it.

the same question with this " in order for draggable to be able to add new levels of nesting, u have to have an empty nest item under ur li items

, which will work as an empty placeholder for draggable to add new items in that place. " @ctf0

@David-Desmaisons fockein awesome, many thanx

Update i figured out the issue, in order for draggable to be able to add new levels of nesting, u have to have an empty nest item under ur li items <ul class="dragArea"></ul>, which will work as an empty placeholder for draggable to add new items in that place.

in my comp code above the problem was v-if="item.children && item.children.length > 0" which prevent creating unnecessary empty items.

however what should happen is that draggable creates that item on the fly, otherwise we will have an empty space in our list.

old fiddle updated https://jsfiddle.net/bfksoj5b/11/

new “old” problem https://jsfiddle.net/bfksoj5b/12/ https://jsfiddle.net/bfksoj5b/14/

try to nest task 3 under task 4, the item will disappear

Update 2 fixed, not sure about the fiddle though, but the nested prop have to be an empty array (not null) or draggable wont be able to push into it.

actually whether i added the dragArea class or not, nothing changes, i wish you were right but sadly nothing is working.

Share the corresponding tree data please.