Déplacement d'un div

**krfa1** · 18/10/2005, 12h53

Hello,

J'ai une petite question toute bête mais moi je ne m'y connait pas trop en javascript. J'ai ce code, mais ça ne fonctionne pas. Il me fait une erreur. En fait j'aimerais que quand je clique sur le div, qu'il se déplace.

Merci d'avance pour votre aide

**KiLVaiDeN** · 18/10/2005, 13h04

Bonjour, ça marche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<div id="calendrier" style="position:absolute;" onClick="deplacement();">Ceci est un div à déplacer</div>
<script language="Javascript" type="text/javascript"> 
<!-- 
objcalendrier = document.getElementById("calendrier"); 
 
function deplacement() 
{ 
objcalendrier.style.top = 200; 
objcalendrier.style.left = 300; 
} 
//--> 
</script> 
</body>
</html>

**Mr N.** · 18/10/2005, 13h05

essaie ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="Javascript" type="text/javascript">
<!--
 
function deplacement()
{
   objcalendrier = document.getElementById("calendrier");
   objcalendrier.top = 100;
   objcalendrier.left = 100;
}
//-->
</script>
 
<div id="calendrier" style="position : absolute;" onClick="deplacement();">

Tant que la page n'est pas chargée, tu ne peux appeler getElementById, car le browser ne sait pas retrouver quelquechose qu'il ne connait pas.

**Mr N.** · 18/10/2005, 13h06

Sinon encore plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script language="Javascript" type="text/javascript">
<!--
 
function deplacement(obj)
{
   obj.top = 100;
   obj.left = 100;
}
//-->
</script>
 
<div id="calendrier" style="position : absolute;" onClick="deplacement(this);">

**KiLVaiDeN** · 18/10/2005, 13h11

Salut Mr.N

Tu oublies l'attribut "style" il me semble.

**krfa1** · 18/10/2005, 13h11

Ah, ok, oui, c'est parfait. Merci beaucoup. Maintenant je suis un peu coincé, car je veux que ma fonction s'exécute depuis que j'ai appuyé sur le bouton de la souris, jusqu'à ce que je relache le bouton.

Mais je ne vois pas trop comment faire. Est-ce que quelqu'un aurait une petites astuces pour moi???

**KiLVaiDeN** · 18/10/2005, 13h13

Tu peux utiliser les evenements onMouseDown(bouton appuyé) et onMouseUp(bouton relaché), qui sont des composantes de onClick

**Mr N.** · 18/10/2005, 13h17

Envoyé par KiLVaiDeN

Salut Mr.N

Tu oublies l'attribut "style" il me semble.

je devrait tourner 7 fois le clavier dans ma bouche avant de taper !

**KiLVaiDeN** · 18/10/2005, 13h20

T'arrives à faire tourner le clavier dans ta bouche ?

Trop fort !

Mais c'est pas grave, l'erreur est humaine, et l'humain est une erreur !

**krfa1** · 18/10/2005, 13h23

Mais entre les deux fonctions je fais comment pour que le div suive la souris. Pour savoir la position de la souris, j'ai fait ce code, mais pour qu'il le suivent tout le temps qu'il n'a pas relaché, alors la mystère.

Mais c'est pas grave, l'erreur est humaine, et l'humain est une erreur !

Alors ça c'est une bonne phrase. Je peux l'enregistrer ou il y a un copyright?

**krfa1** · 18/10/2005, 13h29

J'ai ouvblié de mettre le code, oups... lol

Alors le voici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script language="Javascript" type="text/javascript">
<!--
function deplacement()
	{
	objcalendrier = document.getElementById("calendrier").style;
	objcalendrier.top = event.x+document.body.scrollLeft;
	objcalendrier.left = event.x+document.body.scrollTop;
	}
//-->
</script>
 
<div id="calendrier" style="position : absolute;" onMousedown="javascript : deplacement();">

**Mr N.** · 18/10/2005, 13h38

Va faire un tour là dessus tu m'en diras des nouvelles 8)
http://www.brainjar.com/dhtml/drag/

**krfa1** · 18/10/2005, 14h15

Ouai, merci bien.

J'ai simplifié un peu tout ça car j'avais pas besoin de temps. Voici ce que ça donne maintenant! Maintenant j'ai juste une question, pour rendre compatible avec firefox, c'est la même chose que NS?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!--
 
function deplacement_go()
	{
	objcalendrier = document.getElementById("calendrier").style;
 
	objcalendrier.top = event.y - 30;
	objcalendrier.left = event.x - 30;
	}
function  deplacement_stop()
	{
	objcalendrier.top = objcalendrier.top
	objcalendrier.left = objcalendrier.left
	}
 
function demarrage()
	{
	document.onmousemove=deplacement_go;
	}
 
function arret()
	{
	document.onmousemove="";
	}
//-->
</script>
 
<div id="calendrier" style="position : absolute;" onMouseDown="javascript : demarrage();" onMouseUp="javascript : arret();">

**Mr N.** · 18/10/2005, 14h27

Certainement, mais ca coute rien de le faire de toutes facons étant donné que tu n'as pas à chercher quelle est la correspondance pour telle ou telle fonction.

**krfa1** · 18/10/2005, 15h38

Ouai, c'est tout bon, merci bien pour votre aide. Maintenant j'aurais une dernière question, j'aimerais créer un cookies. J'ai regarder ce qu'il y avait dans la faq, j'ai un peu adapté, mais ça marche pas, il ne m'écrit pas le cookie, et ne fait pas non plus d'erreur. Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 
function ecriture_cookies()
	{
	var expire = new Date (); 
	expire.setTime (expire.getTime() + (24 * 60 * 60 * 1000) * 360); 
	document.cookie = "top=" + escape(objcalendrier.top) + "; expires=" +expire.toGMTString(); 
	}

merci

**krfa1** · 21/10/2005, 11h02

UP

Déplacement d'un div

JavaScript

Discussions similaires

Partager

Partager