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/