Setting ghostClass by drag target instead of drag source

[bluenote10]

This is a follow up to this Vue.Draggable issue.

The problem arises in situations where there are multiple groups of draggables with different styles. Imaging two groups, one with style A, the other with style B. There are two ways to model the ghostClass:

• Without a ghostClass, dragging items within each groups works fine (ghost has correct style), but dragging from one group to the other will result in a ghost which does not fit to the target group.
• Defining cross ghost classes (ghostClass of group A => style B and vice versa) results in correct ghosts when dragging from one group to the other, but then dragging within a group has the wrong ghost.

A possible enhancement to handle such use cases would be to let the drag target define the ghostClass instead of the drag source. In fact, in most use cases I can come up with, there is no necessity to let the source control the ghost, and giving control to the target would always be preferred. So the question is if the behavior could just be switched or if both modes should be supported.

Here are some JSFiddles to illustrate the problem (use case: dragging between a horizontal and vertical layout):

• No ghostClass
• Cross ghostClass

[fayt81]

I have the same problem when I drag items from a group to another with different styles: the source group has some margin between items and the target has not. If I use no ghost class the margin is applied to the ghost when I am over the target. If instead I set the ghost class to force the target style, then the target style is applied even when the item is still in the source group. Is there any workaround or fix?

[owen-m1]

Added in 1.8.0