Drag-and-drop

Drag-and-drop allows users to click a component, drag it through the screen, and drop it into another component. When the drop is performed the application state changes or some event is performed. Drag-and-drop adds functionality without showing additional buttons in the UI which reduces complexity and makes your applications more user-friendly.

Providing D&D fun in Vaadin applications is quite easy. There are two main concepts regarding drag-and-drop. The first is the component to be dragged (let's call it the transferable object). The second is the component where the dragged component will be dropped (let's call it the destiny object). Enabling drag-and-drop consists of enabling dragging in the transferable object and enabling dropping in the destiny object.

This snippet will enable dragging for the button instance:

DragAndDropWrapper draggable = new DragAndDropWrapper(button);
draggable.setDragStartMode(DragStartMode.WRAPPER);

layout.addComponent(draggable); // add...