"drag" de bloc <div>

Commenter

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

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 (slog9)