Drag & drop vers un canvas

Soyez le premier à donner votre avis sur cette source.

Vue 6 301 fois - Téléchargée 718 fois

Description

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_RudiRatlos
Messages postés
6
Date d'inscription
vendredi 17 février 2006
Statut
Membre
Dernière intervention
10 décembre 2007
-
intéressant! :-) Merci pour ce code.
@karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51 -
parce que le dhtml (javascript,dom,css) me convient
rayman223
Messages postés
24
Date d'inscription
dimanche 9 décembre 2007
Statut
Membre
Dernière intervention
7 avril 2013
-
Pourquoi ne pas utiliser JQuery ?

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.