New drag and drop API and more in Vaadin 14.1

Johannes Häyry
Johannes Häyry
On Dec 5, 2019 1:13:32 PM

Vaadin 14.1 brings a new drag and drop API, new components, a faster development-mode build, and a lot more.

The generic drag and drop API

The new drag and drop API allows you to turn any UI component into a draggable component or one capable of receiving dropped components. To make a component:

  • Draggable, simply call the static DragSource.create method or implement the DragSource interface.
  • Capable of receiving dropped components, simply implement the DropTarget interface or decorate the component with the static DropTarget.create method.
VerticalLayout myDropReceiver = new VerticalLayout();
Button myDraggedComponent = new Button("Drag");

DragSource<Button> dragSource = DragSource.create(myDraggedComponent);
dragSource.addDragStartListener((DragStartEvent<Button> event) -> {
	// You can set some meta data for the drag with event.setDragData(Object)

dragSource.addDragEndListener((DragEndEvent<Button> event) -> {
	// React to drag end and possibly call event.clearDragData();

DropTarget<VerticalLayout> dropTarget = DropTarget.create(myDropReceiver);
dropTarget.addDropListener((DropEvent<VerticalLayout> event) -> {
	// Optional<Object> myDragData = event.getDragData();
	// Optional<Component> dragSourceComponent = event.getDragSourceComponent();

View the full source code.

Read more detailed instructions on Docs at Generic Drag and Drop.

Other notable improvements

Further improvements in Vaadin 14.1 include:

  • Faster development-mode build for projects with a lot of dependency libraries. 
  • Input fields for Integer and BigDecimal data types. 
  • A new multi-selection component: MultiSelectListBox. 
  • Enhancements to the Grid column APIs, including programmatic scrolling, and listeners for column resizing and reordering.

There are a lot more in the release. Have a look at the release notes for the full list of changes.

Upgrade today

The 14.1 release replaces Vaadin 14.0 in the 14 LTS (long term support) series. It is a recommended upgrade for everyone using versions 10 to 14.

Get started

Johannes Häyry
Johannes Häyry
I'm a developer disguised as a product marketer. I usually write about new Vaadin releases or the upcoming cool features on the roadmap.
Other posts by Johannes Häyry