Drag & Drop d'un canvas vers un conteneur <div>
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:
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:
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.
