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

Commenter

Contenu du snippet

Comment déplacer des images avec un Drag and Drop.
Il suffit insérer le code dans l'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 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)
	{ // pour Netscape 4
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
	}
    document.onmousedown = startDrag;
	document.onmouseup = endDrag;
}

function startDrag(e)
{ 
	objNum= whichObj(e); // 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,3) == "Net") ? e.pageX : event.clientX;
		cursorPosYStart = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;

		// enregistrement de la position de l'image
	   	objPosLeftStart=parseInt(document.images[objNum].style.left);
	    objPosTopStart=parseInt(document.images[objNum].style.top);

		// capture de l'événènement déplacement du curseur
	   	if (document.captureEvents)
		{ // pour Netscape 4
			document.captureEvents(Event.MOUSEMOVE);
		}
	   	document.onmousemove= moveIt;
    }
    return false; // retourne faux pour que l'explorateur ne tienne pas compte du déplacement 
}

function moveIt(e)
{
    // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux;
    var cursorPosX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
	var cursorPosY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;

	// déplacement de l'image
	document.images[objNum].style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
	document.images[objNum].style.top=objPosTopStart+cursorPosY-cursorPosYStart;
	
    return false;
}

function endDrag(e)
{
	// suppression du numéros de l'image
	objNum = null;
	
	// Arret de la capture de l'événènement déplacement du curseur
   	if (document.captureEvents)
	{ // pour Netscape 4
		document.releaseEvents(Event.MOUSEMOVE);
	}
   	document.onmousemove= "";

}

function whichObj(e)
{
	n=0;
    // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux;
    var cursorPosX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
	var cursorPosY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;

	while (document.images[n])
    { // tant que l'image existe

		// Initialise des attributs de l'image trouver
        document.images[n].style.position="absolute";
		document.images[n].style.zIndex=1000-n;
		document.images[n].style.cursor="default";
		
        if(document.images[n].style.left=="" || document.images[n].style.left==null)
        {  // Si la position de l'image n'est pas définit, on le fait
        	document.images[n].style.left=0;
        	document.images[n].style.top=0;

        }

		// enregistrement de la position de l'image
		objPosLeft=parseInt(document.images[n].style.left);
        objPosTop=parseInt(document.images[n].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[n].height))
		{ // Si le curseur est dans la zone d'affichage de l'image
            return n;
		}
        else n++;
    }
	return null;
}

// -->
</script></head><body onLoad="init()">

<img src="./img.jpg" />
<img src="./img.jpg" />

</body></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)
	{ // pour Netscape 4
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
	}
    document.onmousedown = startDrag;
	document.onmouseup = endDrag;
}

function startDrag(e)
{
	objNum= whichObj(e); // 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,3) == "Net") ? e.pageX : event.clientX;
		cursorPosYStart = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;

		// enregistrement de la position de l'objet
	   	objPosLeftStart=parseInt(document.getElementById(objNum).style.left);
	    objPosTopStart=parseInt(document.getElementById(objNum).style.top);

		// capture de l'événènement déplacement du curseur
	   	if (document.captureEvents)
		{ // pour Netscape 4
			document.captureEvents(Event.MOUSEMOVE);
		}
	   	document.onmousemove= moveIt;
    }
    return false; // retourne faux pour que l'explorateur ne tienne pas compte du déplacement 
}

function moveIt(e)
{
    // enregistrement de la position du curseur ;  Si (netscape) ? vrai : faux;
    var cursorPosX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
	var cursorPosY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;

	// déplacement de l'objet courrant
	document.getElementById(objNum).style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
	document.getElementById(objNum).style.top=objPosTopStart+cursorPosY-cursorPosYStart;
	
    return false;
}

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)
	{ // pour Netscape 4
		document.releaseEvents(Event.MOUSEMOVE);
	}
   	document.onmousemove= "";

}

function whichObj(e)
{
	n=0;
    var id="move"; // 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,3) == "Net") ? e.pageX : event.clientX;
	var cursorPosY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;

	while (document.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+n).style.zIndex=1000-n;
		document.getElementById(id+n).style.cursor="default";

        if(document.getElementById(id+n).style.left=="" || document.getElementById(id+n).style.left==null)
        { // Si la position de l'objet n'est pas définit, on le fait
        	document.getElementById(id+n).style.left=0;
        	document.getElementById(id+n).style.top=0;
        }
		
		// enregistrement de la position de l'objet
		objPosLeft=parseInt(document.getElementById(id+n).style.left);
        objPosTop=parseInt(document.getElementById(id+n).style.top);

		if ((cursorPosX > objPosLeft) &&
		(cursorPosX < objPosLeft + document.getElementById(id+n).offsetWidth) &&
		(cursorPosY > objPosTop) &&
		(cursorPosY < objPosTop + document.getElementById(id+n).offsetHeight))
		{ // Si le curseur est dans la zone d'affichage 
            return id+n;
		}
        else n++;
    }
	return null;
}
// -->
</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" >11</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>

Conclusion :


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

S'inscrire maintenant

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.

Du même auteur (flashfun)