sortable-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:
Demo
Examples of configuration
https://jeanchristophe.app.fi/sortable-layout-demo/
Trello-like demo:
https://jeanchristophe.app.fi/sortable-layout-demo/trello (Code: sortable-layout/sortable-layout-demo/src/main/java/org/vaadin/jchristophe/TrelloLayoutView.java at master · jcgueriaud1/sortable-layout · GitHub )
Demo with vaadin component
https://jeanchristophe.app.fi/sortable-layout-demo/buttons
Demo with Card ( Card - Vaadin Add-on Directory )
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:
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/