sortable-layout | Vaadin

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

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:


Examples of configuration

Trello-like demo: (Code: )

Demo with vaadin component

Demo with Card ( )

Demo with 2 layouts and clone:


Multidrag does not work.

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

Only few configurations are possible.


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);
// wrap your layout
SortableLayout sortableLayout = new SortableLayout(verticalLayout);

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

This first version does not implement all the configurations of the js library. You can check the configuration of the js library here:

Development instructions

Starting the test/demo server:

mvn jetty:run

This deploys demo at http://localhost:8080

Logo made by DesignEvo free logo creator:


Link to this version
BetaReleased 07 February 2022Apache License 2.0
Framework Support
Vaadin platform 14+
Install with
Release notes - Version 1.1.8

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