Vue.draggable: Nested component dragging with transition-group

[szmarci]

When I drag an element across nested components inside a <transition-group> (so that I can have animated sorting), upon releasing the drag, it appears for a second in its old place before ending up in the drop target.
I made a fiddle for this: http://jsfiddle.net/bvjfa9xk/2/

[David-Desmaisons]

Hi @szmarci , this is the behaviour of transition-group used in conjunction with draggable.
An another option of transition is to use animation Sortable option.

[szmarci]

Hi @David-Desmaisons , thanks for getting back to me. Yeah, I checked the animation property of sortable, but it was a little different. It already start animating while you were dragging it, whereas with transition-group it worked after you have dropped the item. Do you know a way of achieving this former behaviour with sortable's animation?

Also, I found another thing, I'm not sure if I should open a new issue or not, but here it is:
Based on this fiddle: http://jsfiddle.net/bvjfa9xk/2/
If you empty a sublist completely, you can no longer drag back elements to it. I assume it is normal behaviour, but is there a way to get around it?
Thanks!

[David-Desmaisons]

For the second question, you can set a minheight on the div where you can drop element, so you can drop element when the collection is empty see jsfiddle examples for this.

For the animation, there migth be a way tuning sortbale animation, but I did not spend enought time to find it.

[jafesch]

Hi @szmarci. Did you find a solution to create the same animation behavior as sortable has. I mean that the transition animation only happens once at the beginning.

[jafesch]

I figured it out myself. You can just pass the animation time via options and don't use <transition-group>

<draggable v-model="items" :options="{ animation: 200 }">