Discussion :

[Thibault92]

Bonjour,

Je cherche a définir des champs 'draggable' sur une img afficher à l'aide d'un canvas, ces champs doivent etre draggable vers une div afficher dans l'écran.

J'arrive à afficher mon img dans mon canvas, à dessiner des rectangle par dessus mais je n'arrive pas à les rendre draggable.

Pour dessiner sur le canvas j'ai réalisé une petite fonction JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
window.onload = function(){
    var canvas = document.getElementById("canvasframe");
    var context = canvas.getContext("2d");
    var destX = 0;
    var destY = 0;
	var taillel = 450;
	var tailleh = 350;
    var imageObj = new Image();
 
    imageObj.src = "ecran/ecran1.png";
    imageObj.onload = function(){
		//Effet 3D
		context.shadowOffsetX = 5;
		context.shadowOffsetY = 5;
		context.shadowBlur = 5;
		context.shadowColor = "grey";
		//Dessin de l'image selon ses parametres
		context.drawImage(imageObj, destX, destY, taillel, tailleh);
		//Definition d'un trait par dessus l'image
		var rectangle1 = context.rect(10,60,70,20);
		context.lineWidth = 2;
                context.draggable = true;
		context.stroke();
 
		var rectangle2 = context.rect(85,60,70,20);
		context.lineWidth = 2;
		context.stroke();		
    };
 
};

Cette fonction affiche 'écran1.png' dans la div correspondante coté HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<canvas id="canvasframe" width="460px" height="360px" class="canvas_screen" >
                        Texte si le navigateur ne supporte pas le HTML Canvas
</canvas>

Le but est de rendre draggable les deux éléments ( rectangle1 et rectangle2) définis dans la fonction JS vers une div et de pouvoir récuperer leurs id associés.

[Pymento]

Salut, à moins d'être dans un cadre d'entrainement, pourquoi ne pas passer par JQuery ?

[_tom_]

Bonjour,

Je te conseille également Jquery UI pour tout ce qui est interaction "évoluée" en javascript, c'est rapide et très performant

Jquery draggable

[Thibault92]

J'ai déjà pas mal regarder coté Jquery et je ne souhaites pas l'utiliser pour plusieurs raisons :

1- Je souhaite que mon élément ne soit pas juste draggable, je souhaite que l'utilisateur puisse "drag & drop" sans que l'original ne soit déplacé (c'est plus dans une optique de copie que de simple déplacement)

2- J'utilise déjà Kendo Ui / Knockout et je n'arrive pas à réaliser cette fonctionnalité à l'aide de ces bibliothèques JavaScript.

[Pymento]

Tu peux simplement, agir sur l'event ondrag de jquery pour lui stipuler de faire/garder une copie à l'emplacement de l'original.
De toute façon tu vas avoir les mêmes contraintes en JS pur.

[_tom_]

Tes raisons ne me paraissent pas très bonnes ^^ :

1- Je souhaite que mon élément ne soit pas juste draggable, je souhaite que l'utilisateur puisse "drag & drop" sans que l'original ne soit déplacé (c'est plus dans une optique de copie que de simple déplacement)

->comme le dit Pymento, tu peux le configurer pour que cela fasse ce que tu souhaites

2- J'utilise déjà Kendo Ui / Knockout et je n'arrive pas à réaliser cette fonctionnalité à l'aide de ces bibliothèques JavaScript.

-> Si tu utilises le lien que j'ai mis dans mon précédent post, tu devrais y arriver