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

Links

• Source code (GitHub)
• Polyfill integration
• Issue tracking
• Demo

Compatibility