"drag" de bloc <div>

Soyez le premier à donner votre avis sur cette source.

Snippet vu 17 758 fois - Téléchargée 19 fois

Contenu du snippet

Un petit exemple de drag en javascript, pour déplacer un bloc <div> à l'aide de la souris. J'ai pas trouvé de codes similaires, alors je mets le mien... Jme dis que ça peut peut-être en intéresser certains.

Source / Exemple :


<html>
<head>
<title>Drag</title>
<script language="javascript">

var down = 0;

//défini l'état de la souris sur le bloc, mouseDown : 'down = 1' sinon 'down = 0'
function setD(a,b,e)
{
	down = a;
	//initialise les variables
	
	//position initiale de la souris lorsqu'on clique sur le bloc
	if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
	{
		init_x = e.pageX;
		init_y = e.pageY;
	}
	else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
	{
		init_x = e.clientX;
		init_y = e.clientY;
	}
	else // (ici pour Internet Explorer et peut-être autre...)
	{
		init_x = e.x;
		init_y = e.y;
	}

	 div_x = document.getElementById(b).offsetLeft;
	 div_y = document.getElementById(b).offsetTop;
}

//fonction qui exécute le déplacement du bloc
function drag(b,e)
{
	//si la souris est 'cliquée' sur le bloc
	if(down==1)
	{
		//on récupère la position de la souris au moment de l'appel de la fontion
		if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
		{
			pos_x = e.pageX;
			pos_y = e.pageY;
		}
		else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
		{
			pos_x = e.clientX;
			pos_y = e.clientY;
		}
		else // (ici pour Internet Explorer et peut-être autre...)
		{
			pos_x = e.x;
			pos_y = e.y;
		}
		
		dx = pos_x - init_x; //distance entre la position initiale et la position actuelle en x
		dy = pos_y - init_y; //distance entre la position initiale et la position actuelle en y
		//déplace le bloc à sa nouvelle position ( -1 +1 pour qu'il reconnaisse que c'est un calcul...)
		document.getElementById(b).style.left = div_x + dx;
		document.getElementById(b).style.top = div_y + dy;
		//affiche la position dans les champs de texte
		document.getElementById(b + 't').value = document.getElementById(b).offsetLeft;
		document.getElementById(b + 'l').value = document.getElementById(b).offsetTop;
	}
}
</script>

</head>

<body bgcolor="#CCCCCC">
<div id="page" style="width:100%;height:100%;position:relative;">

<form name="form">
	bloc1 (top): <input type="text" name="bloc1t" id="bloc1t" value=''>
	bloc1 (left):<input type="text" name="bloc1l" id="bloc1l" value=''>
	bloc2 (top): <input type="text" name="bloc2t" id="bloc2t" value=''>
	bloc2 (left):<input type="text" name="bloc2l" id="bloc2l" value=''>
</form>	
	
	<!-- propriété left et top à déclarer impérativement, sinon il ne les reconnait pas...  -->
	<div id="bloc1" style="position:absolute;top:200px;left:350px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;" onMouseDown="setD(1,'bloc1',event);" onMouseMove="drag('bloc1',event);" onMouseUp="setD(0,'bloc1',event);" onMouseOut="setD(0,'bloc1',event);">

		Click And Drag! (bloc1)

	</div>

	<div id="bloc2" style="position:absolute;top:100px;left:650px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;" onMouseDown="setD(1,'bloc2',event);" onMouseMove="drag('bloc2',event);" onMouseUp="setD(0,'bloc2',event);" onMouseOut="setD(0,'bloc2',event);">

		Click And Drag! (bloc2)

	</div>

</div>
</body>
</html>

Conclusion :


Fonctionne correctement sur IE, ne marche pas sur FireFox à cause des propriétés window.event.clientX pour connaître la position de la souris.
Voilà, en espérant que ça servira à d'autre... (marche sous FF après mise à jour)

A voir également

Ajouter un commentaire Commentaires
Messages postés
172
Date d'inscription
samedi 11 août 2012
Statut
Membre
Dernière intervention
9 avril 2011

le script est bien mais bon comment faire que lors d'un refresh de la page on récupéré le précédant drag ? sinon ou est l'utilité ?
Messages postés
3
Date d'inscription
mardi 1 mars 2005
Statut
Membre
Dernière intervention
15 janvier 2015

Une variante pour corriger la perte du Drag&Drop
<html>
<head>
<title>Drag</title>
<script language="javascript">
var down = 0;
var idDiv = "";
function StartDrag(id,e){
down = true;
idDiv=id
if(e.pageX){
init_x = e.pageX;
init_y = e.pageY;
}else if(e.clientX){
init_x = e.clientX;
init_y = e.clientY;
}else{
init_x = e.x;
init_y = e.y;
}
div_x = document.getElementById(idDiv).offsetLeft;
div_y = document.getElementById(idDiv).offsetTop;
}
function StopDrag(){
down=false;
}
function drag(e){
if(down==1){
if(e.pageX){
pos_x = e.pageX;
pos_y = e.pageY;
}else if(e.clientX){
pos_x = e.clientX;
pos_y = e.clientY;
}else{
pos_x = e.x;
pos_y = e.y;
}
dx = pos_x - init_x; //distance entre la position initiale et la position actuelle en x
dy = pos_y - init_y; //distance entre la position initiale et la position actuelle en y
//déplace le bloc à sa nouvelle position
document.getElementById(idDiv).style.left = div_x + dx;
document.getElementById(idDiv).style.top = div_y + dy;
}
}
</script>
</head>



Click And Drag! (bloc1)




Click And Drag! (bloc2)



</html>
Messages postés
8
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
5 mars 2009

euh "je cherchais", pas "je cherchait", désolé (dommage qu'on ne puisse pas éditer son post)
Messages postés
8
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
5 mars 2009

Très sincèrement, toutes mes félicitations, c'est exactement le script que je cherchait, je l'ai mis en place, adapté à mon code et ça a marché nickel du 1er coup!
Vraiment bravo et un grand merci :D
Messages postés
34
Date d'inscription
dimanche 16 novembre 2003
Statut
Membre
Dernière intervention
24 octobre 2009

Voilà! mise à jour effectuée!

J'ai enlevé le setTimeOut() et la fonction stopDrag, en fait c'était vraiment pas nécessaire et ça marche même mieux comme ça avec FireFox. J'ai aussi fait passer l'évènement en variable (j'ai pas réussi le faire marcher sans sous firefox...).
En tout cas ça marche, c'est le principal!

Pour le onMouseOut, en fait il est pas non plus nécessaire, ça reste pas "accroché" à la souris comme je le pensais. Si on l'enlève ça n'interrompt pas le drag et donc lorsqu'on revient sur le bloc il se remet à se déplacer. Après c'est comme on veux...

Merci encore!
Afficher les 8 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.

Du même auteur (slog9)