Drag and drop components

To try the feature of dnd components further, I modified the sample
http://demo.vaadin.com/sampler-for-vaadin6#DragDropRearrangeComponents
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.addComponent(button);        
        //buttonLayout.setComponentAlignment(button, Alignment.MIDDLE_CENTER);
        
        buttonLayout.addComponent(new Button("Hello"));
        
        components.add(buttonLayout);
...

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();
    setCompositionRoot(layout);
    layout.setComponentVerticalDropRatio(0.3f);
    layout.setDragMode(LayoutDragMode.CLONE);
    layout.setDropHandler(new DefaultVerticalLayoutDropHandler());

    layout.addComponent(new Label(
            "These components are stacked vertically, try reordering them"));
    Button btn = new Button("Button 1");
    btn.setWidth("100px");
   	layout.addComponent(btn);
    btn = new Button("Button 2");
    btn.setWidth("150px");
    layout.addComponent(btn);
    btn = new Button("Button 3");
    btn.setWidth("200px");
    layout.addComponent(btn);
    
    // test code
    layout.addComponent(new DateField());
    layout.addComponent(new ComboBox());
    
    DDVerticalLayout innerLayout = new DDVerticalLayout();
    innerLayout.addComponent(new Button("Hello"));
    innerLayout.addComponent(new Button("World"));
    layout.addComponent(innerLayout);
  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?

Great!
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.setDragMode(LayoutDragMode.CLONE);
innerLayout.setDropHandler(new DefaultVerticalLayoutDropHandler());

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