Bonjour,

Je suis en train de développer un site web.

Cependant, j'aimerais faire quelque chose mais je ne sais pas du tout comment m'y prendre.

Voici ce que je veux faire :

En fait, sur ma page web, il y aura une zone (assez grande)

Dans cette zone, il y a des formes de différentes couleurs qui sont disposées mais celles ci ne se chevauchent pas. Les formes seraient des rectangles de différentes tailles qui s'encastreraient comme dans une puzzle.

L'utilisateur va configurer la forme qu'il veut et va l'ajouter dans la zone.

J'aimerais que l'utilisateur, avec un drag and drop, puisse déposer sa forme dans la zone.

Cependant, (à partir de là, je ne vois pas comment faire) l'utilisateur ne peux pas déposer sa forme sur une forme déjà existante.

De là, il y a 2 solutions

La première est de simplement bloquer le drop si la forme est sur une forme déjà présente. (avec une gestion de collision)

La deuxième, ma préférée, est de faire en sorte de déplacer les formes déjà présentes dans la zone, en les décalant sur les côtés (toujours sans qu'elles ne se chevauchent) afin de toujours laisser une zone libre pour que l'utilisateur puisse déposer sa forme.

J'espère que je suis assez clair.

N'hésitez pas à me demander pour plus de précision.

En sachant, que je préférerais faire la seconde solution.

J'ai déjà pensé utiliser les librairies javascript déjà présentes :

https://draggabilly.desandro.com/ (pour le drag and drop)

https://interactjs.io/ (pour le drag and drop)

https://konvajs.org/docs/sandbox/Col...Detection.html (pour la gestion de collision pour la solution 1)

Auriez vous une idée de comment faire la solution 2 ?

Je vous remercie par avance de votre réponse.

Cordialement

Sybess