> Markdown version of [Drag & Drop](https://vaadin.com/docs/next/flow/component-internals/dnd). Section index: [llms.txt](https://vaadin.com/docs/next/flow/llms.txt)

# Drag & Drop

<!-- vale Vaadin.Wordiness = NO -->

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.

Vaadin supports generic drag and drop for any component. A **drag source** is a component that the user can drag, and a **drop target** is a component that the user can drop things on.

Drag and drop, or "DnD", support is based on the [HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). Vaadin supports a subset of the API’s features that make sense for server-side component development.

## <a id="topics"></a>Topics

- [Drag Source](https://vaadin.com/docs/next/flow/component-internals/dnd/drag-source.md): Making any component draggable and configuring the drag operation.
- [Drop Target](https://vaadin.com/docs/next/flow/component-internals/dnd/drop-target.md): Make any component a drop target that the user can drop things on to.

## <a id="browser-specific-differences"></a>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.

## <a id="drag-drop-on-mobile-devices"></a>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.

## <a id="components-with-built-in-drag-and-drop-features"></a>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](https://vaadin.com/docs/next/components/grid.md#drag-and-drop).