# 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 dragSource = DragSourceExtension.extend(componentToDrag); // Defining the drop target and its extension VerticalLayout dropTarget = new VerticalLayout(); DropTargetExtension 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.