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
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 don’t report any "results" of the drop operation in the
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.
The drag-and-drop feature also works out of the box with mobile devices with the Chrome browser on Android and Safari on iOS. Mobile Firefox is currently unsupported.
Most Vaadin components don’t 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.