Directory

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/
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.