Panel as Drag and Drop Target


I’m trying to set up a Panel as a Drag and Drop target. Originally I tried wrapping the whole panel (ie, new DragAndDropWrapper(myPanel) ), but the wrapped panel didn’t act like the original, unwrapped panel within its container, so I tried wrapping the Panel’s component container. That is, I did this, within my Panel’s constructor:

	VerticalLayout vl = new VerticalLayout();	
	DragAndDropWrapper wrapper = new DragAndDropWrapper(vl);

This works (ie the panel can now accept drops), but the sizing isn’t quite right. That is, horizontal and vertical scrollbars appear around the panel’s content. If I leave off the last line (wrapper.setSizeFull()), I don’t get the vertical scrollbar, but I still get the horizontal scrollbar, and the panel no longer accepts drops.

I’ve tried many variations, but none of them solved the problem. Advice would be much appreciated.


Matthew Fleming

The behaviour of DragAndDropWrapper seems to be different from CustomComponent, so I think this is a bug. Created ticket

Meanwhile, you can either 1) wrap the entire panel inside a DnDWrapper, or 2) wrap the wrapper inside a CustomComponent as follows:

final VerticalLayout target = new VerticalLayout();
DragAndDropWrapper targetWrapper = new DragAndDropWrapper(target);
CustomComponent wrapperWrapper = new CustomComponent(targetWrapper);


Thanks very much for the quick response. Unfortunately, I can’t seem to get either of your proposed solutions to work. As I mentioned in my original post, I already tried solution #1 (wrapping the entire panel inside a DndWrapper). This caused various anomalous behavior – I can’t remember exactly what happened, but the panel was not laid out properly in its container. As for solution #2, when I try it, it does eliminate the scrollbars, but the panel no longer works as a drop target (ie, the drop method of the DropHandler assigned to the DragAndDropWrapper doesn’t get called).

Anything I can do to facilitate resolution of the problem?

Thanks again,


Sorry, I was wrong. Actually solution #2 does work – though I still have a problem. I now have:

	vl = new VerticalLayout();
	DragAndDropWrapper wrapper = new DragAndDropWrapper(vl);
	CustomComponent wrapperWrapper = new CustomComponent(wrapper);

Inside my Panel’s constructor. Now, the Panel is 400 px wide and the same height as its container. I can drag components onto the Panel, and they will then be added to the Vertical Layout vl. This is what I want. But, I need to have vertical scrollbars appear once the height of the components added to vl exceeds the height of the Panel’s container. How can I arrange this?

Thanks very much,

Matthew Fleming

You can have that by setting undefined height (“-1px”) for all the components in the Panel (CustomComponent, DnDWrapper, VL). Unfortunately, when the VL is empty, it and the DnDWrapper shrink to about zero height, so you won’t have an area to which make drops. That is a bit difficult problem. You could put an empty Label(" ") component in the VL, and set it some fixed height to just fill the Panel.

I suggest that you use the solution 1) and wrap the Panel in the DnDWrapper. See
this example
. You need to have undefined height for the VL (content root of the Panel) to get the vertical scroll bar.

Eh, not making much progress. I now have:

public class EditingQuestionnaire extends CustomComponent {

Panel panel;	
public EditingQuestionnaire(String name) {
	panel = new Panel();	
	DragAndDropWrapper wrapper = new DragAndDropWrapper(panel);		

The drop target works, but there are three problems:
1. The size of the drop target is very small. This could be addressed as you suggest – I could put in a placeholder and then maybe remove or adjust it as components are added.
2. I seem to be missing the right side of my panel. That is, I don’t see the normal panel outline on the right. I did not have this problem when I wrapped the VL inside the panel rather than the wrapping the panel itself.
3. Still no vertical scrollbar. As I drag components to add them to the panel’s content, they just go off the bottom of the screen.

Incidentally, this EditingQuestionnaire component is placed in a HorizontalLayout which is itself inside a TabSheet, etc. The HL and TS have been setSizeFull(), and do seem to fill the screen as expected.

Any suggestions would be much appreciated. Vaadin is the bee’s knees, but this is getting frustrating.


Here is the solution:

public class EditingQuestionnaire extends CustomComponent {
String name;
Panel panel;

public EditingQuestionnaire(String name) {
	panel = new Panel();
	panel.setWidth("500px"); = name.substring(0,1).toUpperCase() + name.substring(1, name.length());
	panel. setCaption("New Questionnaire: " +;
	DragAndDropWrapper wrapper = new DragAndDropWrapper(panel);		

It seems kludgish (eg the panel.setWidth(“500px”) and CustomComponent.setWidth(“505px”), but it is the only thing that works – and believe me, I’ve tried everything else.

Matthew Fleming