Plant drag does not drop until a second pointer press

[CleanCodeNinja01]

Summary

Plants cannot be dragged and dropped on the first pointer press. Drag/drop only works starting on the second press.

Steps to reproduce

1. Open the terrarium page (docs/04-js).
2. Press and hold a plant, move the pointer, then release.

Expected

The plant follows the pointer on the first press and stays in place on release.

Actual

The first press does nothing. Drag and drop start working only after a second press.

Cause

dragElement() was called from each plant's onpointerdown handler:

document.querySelectorAll(".plant").forEach((plant) => {
  plant.onpointerdown = function () {
    dragElement(plant);
  };
});

dragElement() assigns terrariumElement.onpointerdown = pointerDrag. That assignment does not re-fire the current pointerdown event, so pointerDrag never runs on the first press. document.onpointermove and document.onpointerup are therefore not attached yet, and there is no drop handler.

On the second press, onpointerdown is already pointerDrag, so move/up listeners attach and drag/drop work.

Suggested fix

Register drag handlers at load time instead of inside onpointerdown:

document.querySelectorAll(".plant").forEach((plant) => {
  dragElement(plant);
});