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

Unfortunately the HTML 5 drag and drop specification is not followed by all the modern browsers the same way. The evergreen versions of Chrome and Firefox work quite consistently, but Edge, Safari (on Macos) and IE11 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. Mobile Firefox is currently unsupported.

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, which are introduced in the following chapters.

The Grid and TreeGrid components are currently the only exceptions to this - those have inbuilt support for dragging rows and dropping on rows. To see this in action you need to see the online examples.