sortable-layout - Vaadin Add-on Directory
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:
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/
Issue tracker
Online Demo
View on GitHub
sortable-layout version 0.1.3
sortable-layout version 0.2.0
First version with SortableConfig, add a link to the demo.
sortable-layout version 0.3.0
Add a lot of configuration possibilities from the Java side and demos.
Drag and drop from SortableLayout to another is not working properly.
Still experimental.
sortable-layout version 0.4.0
Add drag and drop between two sortable layouts and add clone functionality.
See https://github.com/jcgueriaud1/sortable-layout/issues/3 and https://github.com/jcgueriaud1/sortable-layout/issues/4
sortable-layout version 0.5.0
Update the version and fix the dependency
sortable-layout version 1.0.0
* Add new listeners add, delete, reorder
* Create a Trello-like Demo
sortable-layout version 1.1.1
Remove useless log
sortable-layout version 1.1.2
Add choose and unchoose Events.
sortable-layout version 1.1.3
Add on change event
sortable-layout version 1.1.4
Bump the version of sortable JS and Vaadin.
Add the scope provided to the Vaadin libraries
Add Javadoc to the code
Add an example in the demo
sortable-layout version 1.1.5
When the sortable layout is in clone mode, remove the clone when the node is added from the server side (so you won't see the remove/add on the clone object)
sortable-layout version 1.1.6
Check if the parentNode still exist before removing it
sortable-layout version 1.1.7
Fix a log issue in the published version
sortable-layout version 1.1.8
New release due to a maven issue.
Tested in Vaadin 22 and it's working.