la source comme son nom l'indique sert a faire du drag & drop d'image vers un canvas
marche avec ie9 firefox chrome safari
Source / Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<title>drop canvas</title>
<meta charset="utf-8">
<script>
var decX
var decY
function godrag(e){
var dde=(navigator.vendor) ? document.body : document.documentElement;
var Obj = e.currentTarget;
var X =e.clientX + dde.scrollLeft;
var Y =e.clientY + dde.scrollTop;
decX=X-Obj.offsetLeft
decY=Y-Obj.offsetTop
e.dataTransfer.setData('Text', Obj.src);
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.dropEffect = 'move';
}
function Dragov(e) {
e.preventDefault();
}
function drop(e) {
e.preventDefault();
var dde=(navigator.vendor) ? document.body : document.documentElement;
var X =e.clientX + dde.scrollLeft;
var Y =e.clientY + dde.scrollTop;
var draaag=e.dataTransfer.getData('Text');
var imgz = new Image();
imgz.src = draaag;
imgz.onload = function(){
var ctx = document.getElementById('cvs').getContext('2d');
dcx=X-decX-document.getElementById('cvs').offsetLeft
dcy=Y-decY-document.getElementById('cvs').offsetTop
ctx.drawImage(imgz, dcx, dcy);
}
}
</script>
</head>
<body>
<div>
<canvas id="cvs" style='background-color:red;margin-left:200px' width="350" height="350" ondrop="drop(event)" ondragover="Dragov(event)"></canvas>
</div>
<img src='Krusty.png' ondragstart='godrag(event)'>
<img src='earth.png' ondragstart='godrag(event)'>
<img src='papillon.png' ondragstart='godrag(event)'>
<img src='banane.png' ondragstart='godrag(event)'>
</body>
</html>
Conclusion :
ca peut etre utile
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.