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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 20 024 fois - Téléchargée 33 fois

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

Ajouter un commentaire

Commentaires

Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

salut tout le monde,
tres bien le code! moi aussi je veux bien savoir comment faire pour limiter les zones de deplacement, surtout en haut et en bas
Messages postés
21
Date d'inscription
mardi 9 septembre 2003
Statut
Membre
Dernière intervention
5 décembre 2012

et 4 ans plus tard, ca marche plus pas de zip.... j'en ai marre de chercher...
Messages postés
1
Date d'inscription
mercredi 11 septembre 2002
Statut
Membre
Dernière intervention
2 janvier 2008

bonjour,

felicitations pour ce super script.
je souhaiterais savoir si il est possible de limiter les zones de deplacement
et également savoir si il est possible de generer une image resultant de la superposition avec le drag & drop

@+ et bonne année
Messages postés
97
Date d'inscription
mardi 9 avril 2002
Statut
Membre
Dernière intervention
11 mai 2008

Simple, claire, efficace. Exactement l'exemple que je recherchais.
Mes félicitations, bon code.
Messages postés
494
Date d'inscription
dimanche 5 octobre 2003
Statut
Membre
Dernière intervention
1 septembre 2011

Très bon code et facilement adaptable à mes besoins. Par contre, je confirme le bug raporté par 'paradoxxl' le 05/06/2005 (ça fait un bail), lorsque l'on fait un scroll de la page, cela désactive le drag&drop... quel est ce mystère? En attendant... je bloque le scroll sur ma page ;)
tchô tchô
8/10
Afficher les 19 commentaires

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.