Drag and drop components

To try the feature of dnd components further, I modified the sample
as the following:

        //VerticalLayout buttonLayout = new VerticalLayout();
        SortableLayout buttonLayout = new SortableLayout(false); 
        Button button = new Button("Button");
        button.addListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                getWindow().showNotification("Button clicked");
        //buttonLayout.setComponentAlignment(button, Alignment.MIDDLE_CENTER);
        buttonLayout.addComponent(new Button("Hello"));

Currently, buttonLayout and buttons are dnd togather.

If I want to arrange the orders of two buttons inside buttonLayout, or drag and drop one button from buttonLayout to the outer layout, what should I do?

You could try out
DragDropLayouts addon
to make these kinds of drag & drop operations easier to do. Just make buttonLayout a DDVerticalLayout and you should be able to sort the buttons easily.

Disclamer: I’m the author of th DragDropLayouts addon so I might be biased :wink:

Thanks, John. I tried your addon before and found three problems in my case (please refer to the code below):

    // code from website http://john.virtuallypreinstalled.com/DragDropLayouts7/
    final DDVerticalLayout layout = new DDVerticalLayout();
    layout.setDropHandler(new DefaultVerticalLayoutDropHandler());

    layout.addComponent(new Label(
            "These components are stacked vertically, try reordering them"));
    Button btn = new Button("Button 1");
    btn = new Button("Button 2");
    btn = new Button("Button 3");
    // test code
    layout.addComponent(new DateField());
    layout.addComponent(new ComboBox());
    DDVerticalLayout innerLayout = new DDVerticalLayout();
    innerLayout.addComponent(new Button("Hello"));
    innerLayout.addComponent(new Button("World"));
  1. It’s hard to dnd ComboBox, and looks like DateField cannot be dnd.
  2. Embedded layout innerLayout cannot be dnd.
  3. Buttons inside innerLayout cannot be selected, so I have no chance to change their orders and parent layouts.

The vaadin sample code can solve problem 1 and 2. Problem 3 is existed in both. Maybe you could enhance the addon to be more powerful.

Have you tried the latest version of the DragDropLayouts, version 1.0.0.alpha4?

With that version I can drag both the ComboBox and DateField just fine at least in Firefox and Chrome.

If you are having trouble with the latest version could you be a bit more specific on what Browser and Vaadin version you are using with the addon so I can test with that combination?

Problem 1 and 2 are tested ok with version 1.0.0.alpha4. Any suggestion to handle point 3?
BTW when dnd innerLayout (see sample above), UI turns too slow.

Just enable drag&drop for the inner layout as well and it should work.

innerLayout.setDropHandler(new DefaultVerticalLayoutDropHandler());

Thank you, John!
Your addon works fine, I forgot to.set innerLayout dndable.