Html5, js, canvas, draw et drag&drop..

[zevince]

Bonjour,

délicat de trouver un titre explicite, ma question ne semble pas trouver beaucoup de réponses sur le net..

Je réalise une application du type dessin dans le navigateur (pour des seances d'entrainement de foot), je pars donc sur une balise canvas, une seule largeur de trait et différentes couleurs, de ce coté la pas de soucis.

J'ai également besoin de pouvoir insérer des images au clic utilisateur, ça j'ai aussi réussi a trouver la technique..

La ou ca devient un peu plus costaud.. C'est quand il faut pouvoir faire du drag and drop sur ces images insérées de façon dynamique dans le canvas, pour pouvoir les placer plus précisément...

j’insère mon image comme ceci :

Code :

1
2
3
4
5
6
	  var img_elem = new Image();
 
	  img_elem.addEventListener('load', function () {
		context.drawImage(this, mouseX, mouseY);
	  }, false);
	  img_elem.src = img;

j'ai essayé de rajouter un "img_elem.draggable = true;", vu qu'a priori, en HTML5, c'est juste cet attribut a rajouter.. Mais ça ne change rien..

Auriez vous des pistes ou des infos sur le sujet ? Je tourne sur google depuis un moment et je tombe a chaque fois sur le même genre d'infos.. Soit du dessin, soit du drag and drop, mais rien qui s'applique a ce cas la... je suis un peu bloqué !

Merci d'avance aux experts !

[Bovino]

Le problème, c'est que l'API HTML5 Drag and Drop s'applique au balisage HTML, or une balise canvas ne possède pas de balisage, elle ne peut donc pas gérer cette API.
La solution selon moi serait de stocker les positions de tes images et lors du clic sur la balise, récupérer la position où le clic est intervenu et si cette position correspond à celle d'une image, la déplacer lors de l'événement mousemove jusqu'au relâchement.

[zevince]

Solution qui me semble délicate a gérer.. Mais au moins, c'est une piste sérieuse.. Je vais creuser dans cette direction.. !

Merci