sortable-layout

Sortable layout for Vaadin 14. Transform your layout to an drag and drop orderable layout

View larger

Close

View larger

Close

Sortable layout is a Java add-on to add 'drag and drop' sort feature on layout. This layout has to be a Vaadin component that implements HasComponents, for example Div, VerticalLayout or HorizontalLayout.

This add-on is a vaadin wrapper for sortable js library:

https://github.com/SortableJS/Sortable

Demo

Examples of configuration https://jeanchristophe.app.fi/sortable-layout-demo/

Trello-like demo: https://jeanchristophe.app.fi/sortable-layout-demo/trello (Code: https://github.com/jcgueriaud1/sortable-layout/blob/master/sortable-layout-demo/src/main/java/org/vaadin/jchristophe/TrelloLayoutView.java )

Demo with vaadin component https://jeanchristophe.app.fi/sortable-layout-demo/buttons

Demo with Card ( https://vaadin.com/directory/component/card ) https://jeanchristophe.app.fi/sortable-layout-demo/card

Demo with 2 layouts and clone: https://jeanchristophe.app.fi/sortable-layout-demo/twolayouts

Limitations

Multidrag does not work.

Drag and drop with some components does not work on FF (See button example)

Only few configurations are possible.

Usage

Starting the test/demo server:

// add your layout
VerticalLayout verticalLayout = new VerticalLayout();
// add your elements
for (int i = 0; i < 5; i++) {

    Button button = new Button("btn "+ i);
    button.setId("ID "+ i);
    verticalLayout.add(button);
}
// wrap your layout
SortableLayout sortableLayout = new SortableLayout(verticalLayout);
add(sortableLayout);

sortableLayout.setOnOrderChanged(component -> {
    // do whatever you want when the order has been changed
    // Here Show a notification with the list of ordered components
    StringBuilder ids = new StringBuilder("components ");
    for (Component sortableLayoutComponent : sortableLayout.getComponents()) {
        if (sortableLayoutComponent.getId().isPresent()) {
            ids.append(" ").append(sortableLayoutComponent.getId().get());
        }
    }

    Notification.show(ids.toString());
});

This first version does not implement all the configurations of the js library. You can check the configuration of the js library here: https://github.com/SortableJS/Sortable

Development instructions

Starting the test/demo server:

mvn jetty:run

This deploys demo at http://localhost:8080

Logo made by DesignEvo free logo creator: https://www.designevo.com/

Sample code

// add your layout
VerticalLayout verticalLayout = new VerticalLayout();
// add your elements
for (int i = 0; i < 5; i++) {

    Button button = new Button("btn "+ i);
    button.setId("ID "+ i);
    verticalLayout.add(button);
}
// wrap your layout
SortableLayout sortableLayout = new SortableLayout(verticalLayout);
add(sortableLayout);

sortableLayout.setOnOrderChanged(component -> {
    // do whatever you want when the order has been changed
    // Here Show a notification with the list of ordered components
    StringBuilder ids = new StringBuilder("components ");
    for (Component sortableLayoutComponent : sortableLayout.getComponents()) {
        if (sortableLayoutComponent.getId().isPresent()) {
            ids.append(" ").append(sortableLayoutComponent.getId().get());
        }
    }

    Notification.show(ids.toString());
});

Links

• Issue tracker
• Online Demo
• View on GitHub

Compatibility