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 and drop, with the
a drop target that the user can drop things on, with the
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 do not report any "results" of the drop operation in the
This means that, in those browsers it is impossible to determine in the drag source whether or not the drop actually occurred.
Moreover, those browsers do not 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 disappear in the future for the Edge browser once it is 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 is recommended to require them to use either Firefox or Chrome, if possible.
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.
Most Vaadin components do not have built-in support for drag and drop, but can be made draggable or droppable-on 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.