Dragging a UI object from one location to another is a common way to move, copy, or associate objects. The user grabs the object with the mouse, keeping the mouse button pressed, and then releases the button to "drop" it at the other location. For example, most operating systems allow dragging and dropping files between folders, or dragging a document to a program to open it.
The framework supports generic drag and drop for any component. In this context, there is:
-
a drag source that the user can drag, with the
DragSourceextension; -
a drop target that the user can drop things on, with the
DropTargetextension.
Drag and drop, or "DnD", support is based on the HTML5 drag and drop API. The framework supports a subset of the API’s features that make sense for server-side component development. When you are building applications with JavaScript modules, you can use the full HTML 5 API from JavaScript, if needed.
Topics
- Drag Source
- Make any component draggable by the user and configure the drag operation.
- Drop Target
- Make any component a drop target that the user can drop things on to.
Browser-Specific Differences
Not all modern browsers follow the HTML 5 drag and drop specification in the same way. The evergreen versions of Chrome and Firefox work quite consistently. However, Edge and Safari (on macOS) have some issues.
The biggest of these is that these browsers don’t report any "results" of the drop operation in the DragEnd event.
This means that, in those browsers it’s impossible to determine in the drag source if the drop actually occurred.
Moreover, those browsers don’t prevent the drop event when the effectAllowed() doesn’t match the desired dropEffect() in the drop target.
It’s the responsibility of the application developer to take these differences into account. The issues should disappear in the future for the Edge browser when it’s based on Chromium (which is the same as Chrome).
In the meantime, for applications where the users rely on being able to use DnD operations, it’s recommended to require them to use either Firefox or Chrome, if possible.
Drag and Drop on Mobile Devices
The drag and drop feature also works out of the box with mobile devices with the Chrome browser on Android and Safari on iOS. For iOS, there is a polyfill loaded automatically into the browser which works around the lack of support for DnD on iOS. Mobile Firefox is currently unsupported.
Components with Built-in Drag and Drop Features
Most Vaadin components don’t have built-in support for drag and drop, but can be made draggable or droppable-on using the DragSource and DropTarget extensions respectively.
The Grid and TreeGrid components are the only exceptions to this.
They have built-in support for dragging rows and dropping on rows.