Drag and Drop Support

Built-in drag-and-drop with familiar Java listener patterns—no JavaScript required.

DragDropEvent

A typed event that carries full context about the drag operation, including the dragged element and drop target.

DragDropListener

Implement the DragDropListener interface to handle drag-and-drop interactions with a single onEvent method.

Draggable Sources

Mark any element as draggable with setDraggable(true). Users can pick up and move elements naturally.

Drop Targets

Register any element as a drop target. The framework handles hit detection and event dispatch automatically.

Data Transfer

Access the dragged element and its data on the server. Move elements between containers with full state.

Sortable Child Order

The DropEvent includes the full ordered list of child element IDs for both the old and new parent containers, so you can determine the new sort order.

Visual Feedback

The browser provides native drag-and-drop visual cues. Combine with CSS classes for custom hover effects.

DropEvent & DragDropListener

Set elements as draggable, register a DragDropListener on the drop target, and handle the event on the server. The DropEvent provides the dragged element, both parent containers, and the full ordered list of child IDs for determining the new sort order.

Java
public class KanbanBoard extends HtmlPage implements DragDropListener
{
    private Div todoColumn;
    private Div doneColumn;

    @Override
    protected void createBody(Body body)
    {
        todoColumn = new Div();
        todoColumn.setId("todo");

        Div task = new Div();
        task.setText("Implement feature");
        task.setDraggable(true);
        todoColumn.addElement(task);

        doneColumn = new Div();
        doneColumn.setId("done");

        // Register for drop events on both columns
        todoColumn.registerListener(this, DropEvent.class);
        doneColumn.registerListener(this, DropEvent.class);

        body.addElement(todoColumn);
        body.addElement(doneColumn);
    }

    @Override
    public void onEvent(DropEvent event)
    {
        Element dragged = event.getDroppedElement();
        Element newParent = event.getNewParent();

        // Move the element to its new container
        newParent.addElement(dragged);

        // Get the new sort order for persistence
        List<String> newOrder = event.getNewParentChildIds();
        saveSortOrder(newParent.getId(), newOrder);
    }
}

Benefits

Server-Side Logic

All drag-and-drop logic executes on the server where you can validate moves, update databases, and enforce business rules.

No JavaScript Required

The framework handles all client-side drag-and-drop wiring. You write only Java event handlers.

Standard Listener Pattern

DragDropListener follows the same pattern as MouseClickListener, FormListener, and all other Oorian listeners.

Full Element Access

The DragDropEvent provides direct access to the dragged element and the drop target, so you can inspect and manipulate both.

Cross-Browser Support

Oorian's drag-and-drop support works consistently across all modern browsers with no browser-specific code.