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.
Not all modern browsers follow the HTML 5 drag and drop specification the same way.
The evergreen versions of Chrome and Firefox work quite consistently, but Edge and Safari (on macOS) 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.
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.
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
DropTarget extensions respectively.
TreeGrid components are the only exceptions to this.
They have built-in support for dragging rows and dropping on rows.
To see this in action you need to see the online examples.