← Back

HTML5 Drag and Drop Extension

HTML5 Drag and Drop Extension




HTML5 Drag and Drop Extension

Attention: Since Vaadin 14.1 has official out of the box DnD support, this addon will not be maintained in future. Please use the Vaadin 14 functionality instead.

This addon allows the activation of HTML5 drag and drop functionality for Vaadin 10 components. It is activated via Java and provides several listeners to handle dnd events server side.

Development instructions

The activation of the dnd feature orientates on the Vaadin 8 API by "extending" a given component. The following snippet shows a very basic and simple example of how to add a component to a layout by using drag and drop.

// Activate DnD support for mobile devices (like iOS). Activates Polyfill support.

// Defining a draggable component and its extension.
TestComponent componentToDrag = new TestComponent(1);

DragSourceExtension<TestComponent> dragSource = DragSourceExtension.extend(componentToDrag);

// Defining the drop target and its extension
VerticalLayout dropTarget = new VerticalLayout();
DropTargetExtension<VerticalLayout> dropTargetExtension = DropTargetExtension.extend(dropTarget);

dropTargetExtension.addDropListener(event -> event.getDragSource().ifPresent(
    source -> event.getComponent().add(source.getComponent())));


Dragged elements css classes are extended with a dragged class name, that can be used for styling the source element, when the dragging start. Also there will be a element tag specific class like div-dragged if the draggable is a Div element. These classes are removed as soon, as the dragging stops.

For the drop target there will be the permanent classes droptarget and element-tagname + -droptarget (like droptarget div-droptarget). As soon as a dragged element enters the drop area, the classes dragover and element-tag + -dragover will be added to the drop target.

Other class names might be added by yourself as needed.


(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.


  • the current active drag source now automatically gets registered in the current session based on the current UI on drag start and unregistered on drag end
  • drop extension events can obtain the current active drag source
  • drag source can store optional additional (server side) drag data
  • dropped elements are no longer added automatically to the drop target, but must be added manually via server side API (e.g. event.getComponent.add(event.getDragSource().getComponent()))
Apache License 2.0


Vaadin 10
Vaadin 11
Vaadin 12
Vaadin 13
Vaadin 12+ in 1.0.4
Vaadin 11+ in 1.0.3
Vaadin 10+ in 1.0.3

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.