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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
|
<!doctype html>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
</head>
<body>
<script>
var w=window.innerWidth,h=window.innerHeight;
var permission=false;
var oldleft=w/100,oldtop=3*h/8; // position initiale du canvas
var mouseX,mouseY;
//La zone d'aimantation --->un rectangle gris de la même dimension que l'objet à déplacer.
var canvasdest = document.createElement('canvas');
canvasdest.width = w/4;
canvasdest.height = h/4;
canvasdest.style.position="absolute";
canvasdest.style.left=w/2+"px";
canvasdest.style.top=3*h/8+"px";
canvasdest.style.backgroundColor="#dcdcdc";
canvasdest.style.zIndex=0;
document.body.appendChild(canvasdest);
// un objet visuel quelconque à déplacer...----------------------------
var monDessin=window.document.createElement("canvas");
monDessin.width=w/4;
monDessin.height=h/4;
monDessin.style.position="absolute";
monDessin.style.left=w/100+"px";
monDessin.style.top=3*h/8+"px";
monDessin.style.zIndex=1;
monDessin.style.cursor= "pointer";
document.body.appendChild(monDessin);
var context=monDessin.getContext("2d");
context.strokeStyle="#000000";
context.lineWidth=3;
context.beginPath();
context.strokeRect(0,0,w/4,h/4);
context.moveTo(0,0);
context.lineTo(w/4,h/4);
context.moveTo(w/4,0);
context.lineTo(0,h/4);
context.stroke();
//------------------------------------------------
monDessin.addEventListener('mousedown',onmousedown);
addEventListener('mousemove',onmousemove);
addEventListener('mouseup',onmouseup);
function onmousedown(e){
permission=true;
mouseX=e.clientX;
mouseY=e.clientY;
}
function onmousemove(e)
{
if (permission)
{
monDessin.style.left=oldleft+e.clientX-mouseX+'px';
monDessin.style.top= oldtop+e.clientY-mouseY+'px';
if ( intersectRect(canvasdest.getBoundingClientRect(),monDessin.getBoundingClientRect() ) ) {
monDessin.style.left=w/2+"px";
monDessin.style.top=3*h/8+"px";
permission=false;
}
}
}
function onmouseup()
{
permission=false;
oldleft=monDessin.offsetLeft;
oldtop=monDessin.offsetTop;
}
function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
</script>
</body>
</html> |
Partager