Two-level drag and drop

Hi vaadin devs,

I’ve been experimenting with Vaadin for a while and feel to have grasped good understanding about the components. Yet, I have an issue and would like to ask if this has ever been encountered by somebody else before.

I have a custom component with a VerticalLayout as the layout. The custom component also stores a DropHandler object in its property. The VerticalLayout is put into a DragAndDropWrapper and set as the composition root. when i add component into the custom component, I wrap it with the DragAndDropWrapper and add into the VerticalLayout. I then set drag mode into “Wrapper”. Having this kind of setup, I can drag and drop vertically. Let’s name this vertical drag and drop as the first level DnD.

Now I want to add a “horizontal stack” that can stack and pop up components horizontally. Additionally, the components inside the horizontal stack should be draggable. The horizontal stack will then be added into the vertical layout. This means that the horizontal stack will have two level of drag and drop: relative to the vertical layout (the horizontal stack itself) and relative to the horizontal stack (component inside the horizontal stack).

My current approach is to cascade the approach I use in one level drag and drop. So, I create the horizontal stack as a custom component, putting a HorizontalLayout as its component and when I add new components, I wrap them and add into the HorizontalLayout. Unfortunately, this cascading approach does not work.

I can add components into the horizontal stack, but I can not drag them since dragging will move the HorizontalStack relative to the VerticalLayout instead of the contained components in the horizontal stack. I also notice significant delay when dragging the component. I suspect this is caused by some looping but haven’t confirmed this yet.

I would like to know if there is any of you ever implemented the two-level drag and drop. Observing the source code of, i notice that dragging is triggered by mouse down event (line 79-80):

Widget w = Util.findWidget((Element) event.getNativeEvent()
                            .getEventTarget().cast(), null);

I suspect that I cannot drag the components inside the horizontal stack because the event fetches the stack itself instead of the contained element.

I would like to know if changing the behavior to detect the contained element seems to be a feasible (and scalable) one. Otherwise, I really appreciate if you have an idea to resolve this kind of issue.

That’s a problem I alredy reported some time ago:

hi sascha,
thanks for the info. i really appreciate it. Adding “event.stopPropagation” was actually part of the solution and some other modifications were needed for the wrapper.


This post is old, but can you tell me if this problem is solved in vaadin 6.8 or 7.0 ?

Thanks for your response.

Stéphanie Simon.