HTML5 Drag and Drop Extension - Vaadin Add-on Directory

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

Source code (GitHub)
Polyfill integration
Issue tracking
Demo

HTML5 Drag and Drop Extension version 0.0.1

HTML5 Drag and Drop Extension version 0.0.2
- effect allowed is now set to "move" when start dragging - drag data is now set to key "text/plain" - drag data is now removed on drag end

HTML5 Drag and Drop Extension version 0.0.3
Added JavaDocs. Class names for dragged component is now added/removed automatically when a drag event starts / ends. Same for the drop target, when a dragged component enters / leaves the drop area. The class names are - `dragged` and component-element-tag + `dragged` (for a Div will be then `class="dragged div-dragged"`) - `dragover` and component-element-tag + `dragover` (for a Div will be then `class="dragover div-dragover"`) Drop targets will also be now marked via css class as droptarget and have following classes: - `droptarget` and component-element-tag + `droptarget` (for a Div will be then `class="droptarget div-droptarget"`) The class `droptarget` is also used for client side checks, if a drop is allowed there (server side check will follow up later).

HTML5 Drag and Drop Extension version 0.0.4
- fixed a bug where the drop target got the wrong init class name

HTML5 Drag and Drop Extension version 0.0.5
- fixed a bug where the drop target got the wrong init class name - propagation of drop event gets stopped now and won't be propagated to parent elements

HTML5 Drag and Drop Extension version 1.0.0
- integrated support for Polyfill - added event handler to prevent scrolling on iOS devices when dragging elements around - updated maturity to "Beta"

HTML5 Drag and Drop Extension version 1.0.1
- integrated support for Polyfill - added event handler to prevent scrolling on iOS devices when dragging elements around - updated maturity to "Beta"

HTML5 Drag and Drop Extension version 1.0.2
- fixed an issue with using the addon in an application in production mode

HTML5 Drag and Drop Extension version 1.0.3
- removed parent - updated to Vaadin 10.0.6

HTML5 Drag and Drop Extension version 1.0.4
Added a fix for error undefined `e.target.classList`.

HTML5 Drag and Drop Extension version 1.0.5
Fix for https://github.com/stefanuebe/vaadin-html5-drag-and-drop/issues/4 Thanks to Tomáš and Robert for their support at this fix.

HTML5 Drag and Drop Extension 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())`)