Skip to content

Drag and Drop

curveo edited this page May 12, 2026 · 1 revision

Drag and Drop

TesseraUI provides a built-in drag-and-drop system. Any panel or HTML element can be made draggable, and any Java object can serve as the drop payload.


Making an element draggable (HTML)

<row>
  <div class="drag-item" draggable="true" drag-payload="red">Red</div>
  <div class="drag-item" draggable="true" drag-payload="blue">Blue</div>
  <div class="drag-item" draggable="true" drag-payload="green">Green</div>
</row>
.drag-item {
  background: #1e2433;
  border: 1px solid #b87333;
  padding: 6px;
  flex: 1;
}
.drag-item:hover { background: #2a3450; }

The drag-payload attribute value is a String. Wire the drop zone in Java.


Making a panel draggable (Java)

TesseraPanel item = TesseraPanel.column(x, y, w, h)
    .background(TesseraPalette.BG2)
    .border(1, TesseraPalette.COPPER_LO)
    .draggable(true)
    .dragPayload("my-payload");

Or with any Object payload:

panel.draggable(true);
panel.dragPayload(myInventoryItem);   // any Object

Registering a drop zone (Java)

TesseraPanel dropZone = TesseraPanel.column(x, y, w, h)
    .background(TesseraPalette.BG1)
    .border(1, TesseraPalette.COPPER_LO);

dropZone.dropZone(new TesseraDropZone() {

    @Override
    public boolean accepts(Object payload) {
        return payload instanceof String;
    }

    @Override
    public void onDrop(Object payload) {
        String value = (String) payload;
        System.out.println("Dropped: " + value);
        // update your model, rebuild UI, etc.
    }

    @Override
    public Rect dropBounds() {
        return dropZone.bounds();
    }
});

Highlights

When accepts(payload) returns true during a drag, TesseraUI renders a subtle highlight on the drop zone automatically.


Drag ghost

While dragging, TesseraUI renders a semi-transparent ghost of the dragged widget following the cursor. This is handled by TesseraScreen.renderTesseraOverlays() — no extra wiring is needed when extending TesseraScreen.


Drag-and-drop between item slots

TesseraItemGrid and TesseraItemSlot support item drag-and-drop out of the box — see Item Slots.

Clone this wiki locally