Bonjour, et bonne année à toutes et tous...

Comme indiqué dans le titre, je m'essaye au drag and drop avec React ( sans librairie: pour apprendre ! )

Je déplace donc des blocs ( éléments <li>) dans une liste de repas (contenant des ingrédients)
De base, mes éléments ont tous la même hauteur (même nombre d'ingrédients), donc le drag and drop est fluide entre ces éléments.

Mais si je rajoute un repas, celui-ci ne contenant pas d'ingrédients, sa hauteur est plus petite ! Du coup,
le déplacement est moins fluide lorsque que l'on passe sur un autre élément.

Je partage mon code simplifié ici
J'ai enlevé du code et des fonctionnalités pour me concentrer sur le problème du moment.

Donc ajoutez un repas et faites glisser ce repas où vous voulez: "tremblements" logiques pendant le glissé sur un autre élément à cause de la taille différente

Je n'ai pas vraiment de pistes: j'avais essayé d'enregistrer la hauteur du (petit) repas puis de lui donner la taille de l'élément sur lequel il glissait
et enfin de lui redonner sa taille lors du dragEnd. Mais je ne sui pas satisfait du résultat.
Peut-être n'est-ce pas la bonne solution, ou alors je ne l'ai pas fait correctement.

Si vous avez des pistes, je vous remercie par avance.
Et si vous voyez également un moyen de faire le drag and drop plus simple ou plus dans les règles de l'art...
Je remarque aussi que si je sors de la zone (<ul>) pendant le glissement, le rendu n'est pas propre:
l'ombre retourne au point de départ, alors que l'élément s'affichera à la place où on l'a déposé...

Laurent.

P.S: désolé pour le css, ce n'est pas mon souci du moment et j'avoue ne pas vraiment être un artiste à ce niveau.