Generic Drag and Drop

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 DragSource extension

  • a drop target the user can drop things on with the DropTarget extension

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

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.

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.

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 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. To see this in action you need to see the online examples.