Generic Drag and Drop
|This feature is available starting from Vaadin version 14.1 and is aimed at enabling drag and drop operations inside Vaadin UIs. Support for generic drags & drops to and from outside desktop applications or other web pages is coming in an upcoming minor release for 14.|
Dragging an UI object from one location to another by grabbing it with mouse, holding the mouse button pressed, and then releasing the button to "drop" it to the other location is a common way to move, copy, or associate objects. For example, most operating systems allow dragging and dropping files between folders or dragging a document on a program to open it. The framework has generic drag and drop support for making any component:
a drag source the user can drag and drop with the
a drop target the user can drop things on with the
The drag and drop (in short, DnD) support is based on the HTML5 drag and drop API and supports a subset of its features which make sense for server side component development. When you’re building applications with JS modules, you can use the full HTML 5 API from JS if needed.
Browser Specific Differences
Unfortunately the HTML 5 drag and drop specification is not followed by all the
modern browsers the same way. The evergreen versions of Chrome and Firefox work
quite consistently, but Edge, Safari (on Macos) and IE11 have some issues. The
biggest is that the latter browsers do not report any "results" of the drop
operation in the
DragEnd event, meaning that in those browsers it is impossible
to determine in the drag source whether the drop actually occurred or not. Also
those browsers don’t prevent the drop event when the
effectAllowed does not
match the desired
dropEffect in the drop target. It is the responsibility of
the application developer to take these differences into account. The issues
should be going away in the future for Edge browser once it will be based
on Chromium (same as Chrome).
For now, for applications where the users rely on working DnD operations, it is recommended to "force" 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 Chrome browser on Android and Safari on iOS. For iOS, there is a polyfill loaded automatically into the browser which workarounds the lacking support for DnD on iOS. Mobile Firefox is currently unsupported.
Components with In-Built Drag and Drop Features
Most of the Vaadin components don’t have any in-built support for drag and dropping,
but can be made draggable or drop targets using the
extensions respectively, which are introduced in the following chapters.
TreeGrid components are currently the only exceptions to this -
those have inbuilt support for dragging rows and dropping on rows. To see this
in action you need to see the online examples.