====== Drag & Drop ======

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.

===== Sources And Targets =====

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

  * ''{{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:

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

===== Drop Event =====

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

<code yaml>
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
</code>

  * ''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.

===== Conditions =====

  * ''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.

===== Showing Roles =====

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.

<code yaml>
show-type: true

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

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

**Join us on [[https://discord.gg/Z63DtVV|discord Make&Play]]**