**Language / Langue :** [[fr:yaml:glisser-deposer|FR]] | **EN**

====== 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: 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).

===== 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.

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 [[https://discord.gg/Z63DtVV|Discord Make&Play]]**