-
Notifications
You must be signed in to change notification settings - Fork 0
Drag and Drop
curveo edited this page May 12, 2026
·
1 revision
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.
<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.
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 ObjectTesseraPanel 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();
}
});When accepts(payload) returns true during a drag, TesseraUI renders a subtle highlight on the drop zone automatically.
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.
TesseraItemGrid and TesseraItemSlot support item drag-and-drop out of the box — see Item Slots.