Drag and drop, tiré et déplacé des images, sans modifier les balises img +: ou en changeant l'id d'une balise

0/5 (nineteen avis)

Snippet vu 21 744 fois - Téléchargée 35 fois

Contenu du snippet

Comment déplacer des images avec un Drag and Drop.
Il suffit insérer le code dans fifty'entéte d'une page pour popuvoir déplacer toutes les images de la page.

Source / Exemple : 


<html><head><script language="JavaScript"> <!-- // Définition des variables globale. var objNum=0; // Numéros de 50'objet courrant var cursorPosXStart,cursorPosYStart; // Position du curseur au départ du déplacement var objPosLeftStart,objPosTopStart; // Position de 50'objet au départ du déplacement  function init() {   // démarrage appelé dans la ligne body 	 	// capture d'événènements appuyer, relacher 	if (document.captureEvents) 	{ // pour Netscape four 		certificate.captureEvents(Event.MOUSEDOWN | Consequence.MOUSEUP); 	}     document.onmousedown = startDrag; 	document.onmouseup = endDrag; }  part startDrag(east) {  	objNum= whichObj(due east); // recherche l'objet selectionné 	     if(objNum!=nada)     // Si l'objet est trouvé     { 	    // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux; 	    cursorPosXStart = (navigator.appName.substring(0,3) == "Net") ? eastward.pageX : result.clientX; 		cursorPosYStart = (navigator.appName.substring(0,iii) == "Cyberspace") ? e.pageY : consequence.clientY;  		// enregistrement de la position de l'image 	   	objPosLeftStart=parseInt(document.images[objNum].fashion.left); 	    objPosTopStart=parseInt(document.images[objNum].fashion.top);  		// capture de fifty'événènement déplacement du curseur 	   	if (certificate.captureEvents) 		{ // pour Netscape iv 			document.captureEvents(Effect.MOUSEMOVE); 		} 	   	certificate.onmousemove= moveIt;     }     return simulated; // retourne faux cascade que 50'explorateur ne tienne pas compte du déplacement  }  function moveIt(due east) {     // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux;     var cursorPosX = (navigator.appName.substring(0,iii) == "Net") ? e.pageX : event.clientX; 	var cursorPosY = (navigator.appName.substring(0,three) == "Cyberspace") ? e.pageY : event.clientY;  	// déplacement de fifty'image 	certificate.images[objNum].style.left=objPosLeftStart+cursorPosX-cursorPosXStart; 	certificate.images[objNum].style.acme=objPosTopStart+cursorPosY-cursorPosYStart; 	     return simulated; }  part endDrag(e) { 	// suppression du numéros de fifty'paradigm 	objNum = nothing; 	 	// Arret de la capture de l'événènement déplacement du curseur    	if (certificate.captureEvents) 	{ // pour Netscape four 		document.releaseEvents(Event.MOUSEMOVE); 	}    	document.onmousemove= "";  }  function whichObj(eastward) { 	n=0;     // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux;     var cursorPosX = (navigator.appName.substring(0,three) == "Net") ? east.pageX : event.clientX; 	var cursorPosY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : outcome.clientY;  	while (document.images[northward])     { // tant que fifty'image existe  		// Initialise des attributs de l'epitome trouver         document.images[north].style.position="absolute"; 		document.images[n].manner.zIndex=1000-n; 		document.images[n].way.cursor="default"; 		         if(document.images[n].way.left=="" || document.images[due north].style.left==null)         {  // Si la position de 50'image n'est pas définit, on le fait         	document.images[north].way.left=0;         	document.images[n].way.pinnacle=0;          }  		// enregistrement de la position de l'image 		objPosLeft=parseInt(certificate.images[n].style.left);         objPosTop=parseInt(document.images[north].style.top);  		// position de l'objet sur lequel il est cliqué 		if ((cursorPosX > objPosLeft) && 		(cursorPosX < objPosLeft + document.images[n].width) && 		(cursorPosY > objPosTop) && 		(cursorPosY < objPosTop + document.images[due north].meridian)) 		{ // Si le curseur est dans la zone d'affichage de fifty'image             return n; 		}         else n++;     } 	render null; }  // --> </script></head><body onLoad="init()">  <img src="./img.jpg" /> <img src="./img.jpg" />  </trunk></html>  ----------------------------  ----------------------------------------------- ---------------------------------- - -------------------------------------   <html><head><script language="JavaScript"> <!-- // On peux déplacer tous les éléments juste changeant sont id.  // Définition des variables globale. var objNum=0; // Numéros de l'objet courrant var cursorPosXStart,cursorPosYStart; // Position du curseur au départ du déplacement var objPosLeftStart,objPosTopStart; // Position de l'objet au départ du déplacement  function init() {   // démarrage appelé dans la ligne body 	 	// capture d'événènements appuyer, relacher 	if (document.captureEvents) 	{ // cascade Netscape 4 		document.captureEvents(Event.MOUSEDOWN | Outcome.MOUSEUP); 	}     document.onmousedown = startDrag; 	document.onmouseup = endDrag; }  office startDrag(e) { 	objNum= whichObj(due east); // recherche l'objet selectionné 	     if(objNum!=null)     // Si l'objet est trouvé     { 	    // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux; 	    cursorPosXStart = (navigator.appName.substring(0,iii) == "Net") ? e.pageX : issue.clientX; 		cursorPosYStart = (navigator.appName.substring(0,3) == "Internet") ? e.pageY : issue.clientY;  		// enregistrement de la position de fifty'objet 	   	objPosLeftStart=parseInt(document.getElementById(objNum).style.left); 	    objPosTopStart=parseInt(document.getElementById(objNum).way.top);  		// capture de l'événènement déplacement du curseur 	   	if (document.captureEvents) 		{ // cascade Netscape four 			certificate.captureEvents(Event.MOUSEMOVE); 		} 	   	document.onmousemove= moveIt;     }     return simulated; // retourne faux pour que l'explorateur ne tienne pas compte du déplacement  }  part moveIt(e) {     // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux;     var cursorPosX = (navigator.appName.substring(0,3) == "Net") ? eastward.pageX : upshot.clientX; 	var cursorPosY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : effect.clientY;  	// déplacement de 50'objet courrant 	document.getElementById(objNum).fashion.left=objPosLeftStart+cursorPosX-cursorPosXStart; 	document.getElementById(objNum).way.top=objPosTopStart+cursorPosY-cursorPosYStart; 	     return imitation; }  function endDrag(e) { 	// suppression du numéros de l'objet courrant 	objNum = null;  	// Arret de la capture de l'événènement déplacement du curseur    	if (document.captureEvents) 	{ // cascade Netscape 4 		document.releaseEvents(Upshot.MOUSEMOVE); 	}    	document.onmousemove= "";  }  role whichObj(east) { 	n=0;     var id="motion"; // debut du nom des IDs des éléments qui doivent bouger, vous pouvez le changer. 	 	// enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux;     var cursorPosX = (navigator.appName.substring(0,three) == "Internet") ? due east.pageX : event.clientX; 	var cursorPosY = (navigator.appName.substring(0,3) == "Cyberspace") ? eastward.pageY : consequence.clientY;  	while (certificate.getElementById(id+n))     { // tant que l'ID existe ("move0","move1","move2",...) 	 		// Initialise des attributs de l'objet trouver         document.getElementById(id+n).style.position="absolute";         document.getElementById(id+north).fashion.zIndex=thou-n; 		document.getElementById(id+north).style.cursor="default";          if(certificate.getElementById(id+n).fashion.left=="" || certificate.getElementById(id+n).style.left==nix)         { // Si la position de 50'objet n'est pas définit, on le fait         	document.getElementById(id+n).style.left=0;         	document.getElementById(id+due north).mode.top=0;         } 		 		// enregistrement de la position de fifty'objet 		objPosLeft=parseInt(document.getElementById(id+due north).style.left);         objPosTop=parseInt(document.getElementById(id+due north).way.top);  		if ((cursorPosX > objPosLeft) && 		(cursorPosX < objPosLeft + certificate.getElementById(id+north).offsetWidth) && 		(cursorPosY > objPosTop) && 		(cursorPosY < objPosTop + certificate.getElementById(id+n).offsetHeight)) 		{ // Si le curseur est dans la zone d'affichage              render id+northward; 		}         else n++;     } 	return nothing; } // --> </script></head><body onLoad="init()"> <img src="./img.jpg" width="300px" /><img src="./img.jpg" width="300px" /><img src="./img.jpg" width="300px" />  <img src="./img.jpg" id="move0" width="200px" /> <div id="move1" >eleven</div> <div id="move2" >222222222</div> <div id="move3" >3333333333333333</div> <div id="move4" >44444444444444444444444444444444444444444444</div> <img src="./img2.jpg" id="move5" width="200px" /> </body></html>

Determination :

J'ai mis 2 version, la première juste pour les images
et la 2ème pour tout objet dont l'id à été définis.

A voir également