Sortable layout is a Java add-on to add drag and drop sort on layout (Vaadin Component that implements HasComponents).
This add-on is a vaadin wrapper for sortable js library:
https://github.com/SortableJS/Sortable
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
Missing features:
- Drag and drop from one layout to another
- Clone items
- Group configuration is working on the client side but is not working on the server side.
Starting the test/demo server:
mvn spring-boot:run
This deploys demo at http://localhost:8080
To run the unit tests, execute the following command:
mvn clean install
The integration tests are built using Spring Boot, Playwright, and Axe-core.
The tests are located in files ending with IT.java in the sortable-layout-demo module.
The tests are run with the maven-failsafe-plugin when the it profile is activated.
To run the integration tests, execute the following command:
mvn verify -Pit
Sort a list of buttons: (Does not work in Firefox)
Sort a list of cards
