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.
DndActivator.activateMobileDnd();

// 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())));

Styling

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.

Install

Link to this version
Not maintainedReleased 09 April 2019Apache License 2.0
Framework Support
Vaadin platform 10
Vaadin platform 11
Vaadin platform 12
Vaadin platform 13
Install with
Release notes - Version 1.1.0
  • 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()))