Cross-Platform Drag and Drop

Each item is rendered in all three locations (source, zone 1, zone 2), but only one copy is visible at a time. Visibility is controlled by style-display bindings: "flex" to show, "none" to hide.

# Item 1 has three visibility states
i1_src_vis: IO[State[String]] = state("flex")   # visible in source
i1_z1_vis: IO[State[String]] = state("none")   # hidden in zone 1
i1_z2_vis: IO[State[String]] = state("none")   # hidden in zone 2

# The chip reads its visibility from state
def item_chip(label, color, vis, handler) -> VNode:
  h("div", [
    ("style-display", vis),  # bound to state!
    on_dragstart(handler)
  ], [text(label)])

This avoids conditional rendering entirely. Each style.display update is a single property write through the binding map -- no re-render needed.

Three event handlers power the interaction: on_dragstart (user picks up item), on_dragover (item hovers over a zone), on_drop (item released over a zone).

def start_drag_1(_: Unit) -> IO[Unit]: (
  d <- dragging.flatMap()
  d.write("item1")  # record which item is moving
)

def drop_zone1(_: Unit) -> IO[Unit]: (
  d <- dragging.flatMap()
  which <- d.read().flatMap()
  match which:
    case "item1":
      show_item1_at("zone1")  # show in zone1, hide elsewhere
    case "item2":
      show_item2_at("zone1")
    ...
)

HTML5 drag events don't fire on touch devices. Yichus includes a runtime polyfill that intercepts touch events on elements with data-ondragstart attributes:

// Runtime polyfill (generated automatically)
document.addEventListener('touchstart', (e) => {
  var el = e.target.closest('[data-ondragstart]');
  if (el) {
    // Fire the dragstart handler
    // Create visual clone that follows the finger
  }
});

document.addEventListener('touchend', (e) => {
  // Find element under finger with elementFromPoint
  // If it has data-ondrop, fire its drop handler
});

The polyfill creates a semi-transparent clone that follows the finger, then uses document.elementFromPoint() on touchend to find the drop target. The same Bosatsu handlers fire for both mouse and touch -- no duplicate code needed.

When Item 1 is dropped in Zone 1, three state writes occur:

Each write looks up the binding map, finds the target element and property, and writes directly. Three state changes, three DOM property mutations, zero tree diffing.