Complicated relationship

[varHarrie]

After I read the docs in README.md and demo project, it seem to be a powerful dnd lib. But I still not entirely clear the relationship between drake, service and model.

Another problem is whether the this.$dragula.$service is not the instanceof DragulaService? and why on is not a method of this.$dragula.$service?

I need you help that to provide a further description. Thank you.

[kristianmandrup]

Yes, could be explained better, perhaps with a diagram and flows etc.

I would recommend you look at the demo code examples to get a feel for how easy it is to use and setup. The service interacts with the UI and delegates to Drake for DND and to the ModelManager for managing the underlying model for each dnd action.

Will improve the docs shortly.

[varHarrie]

Is it support for transition-group or any demo ?

[kristianmandrup]

Transition group? Well should be support for any Dragula configuration. Please explain.

[varHarrie]

@kristianmandrup Here is jsfiddle

It's a official transition-group demo (from here) and integrates with vue2-dragula.

We can see some transition animations when click the bottom buttons (Shuffle, Add, Remove), but it immediately change when drag and drog the item without transition.

[kristianmandrup]

Cool ;) So what is the verdict? If it doesn't work as you would expect how can we fix it? What needs to be done?

[kristianmandrup]

Got back online with my laptop. Was unable to do dnd with my phone on your example. I see now that there is no animation when doing dnd. You might get a hint as to why if you enabled logging in the example, although it can be overwhelming. The usual examples use 2 lists:
NamedServices but not sure if this is the cause. Likely it is the Vue change detection system not picking up the underlying model change correctly.

For this we need to look into the ModelManager mutation methods and we see that it acts as an indirection/shield layer so that the elements are not directly linked to the list I think. The ActionManager used for undo/redo might currently work better in this regard. In order for the TimeMachine to work, I had to manually rebuild the new array with push in order for Vue change detection system to kick in!

I'm not really that experiences with the internals of Vue2. This was my first attempt at a plugin.

Perhaps debugging from here DragHandler insertAt would go a long way...

[kristianmandrup]

The service does use ModelManager by default as can be seen here

[varHarrie]

I will try to more practice with your advice when I have free time. Thank for your reply! 😃

[kristianmandrup]

Would be really awesome if you/we could make Transition groups work!!! :)