Docs

Docs

Drag & Drop

Drag and drop between components as well as between the UI and the operating system.

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

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

Drag and drop, or "DnD", support is based on the HTML5 drag and drop API. The framework supports a subset of the API’s features that make sense for server-side component development. When you are building applications with JavaScript modules, you can use the full HTML 5 API from JavaScript, if needed.

Topics

Drag Source
Making any component draggable and configuring the drag operation.
Drop Target
Make any component a drop target that the user can drop things on to.

Browser-Specific Differences

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 DragEnd event. 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.

Drag & Drop on Mobile Devices

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.

Components with Built-in Drag and Drop Features

Most Vaadin components don’t have built-in support for drag and drop, but can be made draggable or droppable-on 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.