Drag & drop lets the player take an element from the text and drop it onto a target. It is available on web, desktop and interactive HTML exports. Other adapters display the content without drag&drop interaction.

text: "The {{door:$door}} is locked. The {{key:>key}} shines on the floor."

• {{label:>id}} : source the player can drag.
• {{label:$id}} : target that can receive a source.
• {{label:>src_id:$tgt_id}} : element that is both source and target.
• {{label:>id1;id2}} : one label can carry several ids.

The syntax also works with pictures:

text: "Drop {{[[/scenarios/images/test/un.png]]:>token}} onto the {{slab:$slab}}."

An event becomes a drag&drop pair when it contains source: and target:.

text: "The {{door:$door}} is locked. The {{key:>key}} shines on the floor."
interaction-ko: "Nothing interesting happens here."
events:
  - id: key_on_door
    source: key
    target: door
    do: "door_locked.=.0"
    text: "The door opens."
    text-ko: "This key does not open that door."
    once: true

• source: is the id of the dragged element.
• target: is the id of the element receiving the drop.
• text: is shown when the event runs.
• text-ko: is shown when the if: condition fails.
• interaction-ko: at room level is the fallback when no pair matches.

• if: true: the event runs.
• if: false: text-ko: is shown, otherwise interaction-ko: if defined.
• visible-if: false: the element becomes normal text and the drop is ignored.
• disabled-if: true: the element is visible but inactive; a forced drop stays silent.
• once: true works like it does on other events: the interaction can only occur once per game.
• once: room: the event resets each time the player re-enters the room (useful for repeatable per-visit interactions).

By default, sources and targets use a neutral style. To show roles visually, enable show-type: true at scenario level or only in a room.

show-type: true

rooms:
  - id: workshop
    show-type: true
    text: "{{hammer:>hammer}} / {{anvil:$anvil}}"

When a value is defined in a room, it overrides the global option for that room.

While dragging (or after a first tap on mobile), the interactive elements of the room are highlighted to show the possible targets.

Join us on Discord Make&Play