Directory

← Back

sortable-layout

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

Author

Rating

Popularity

200+

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());
});

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

New release due to a maven issue. Tested in Vaadin 22 and it's working.

Released
2022-02-07
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Browser
N/A

sortable-layout - Vaadin Add-on Directory

Sortable layout for Vaadin 14. Transform your layout to an drag and drop orderable layout sortable-layout - Vaadin Add-on Directory
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/
Online