Déplacement d'un div

Version imprimable

18/10/2005, 12h53
krfa1

Déplacement d'un div

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.

Citation:

<script language="Javascript" type="text/javascript">

</script>

<div id="calendrier" style="position : absolute;" onClick="javascript : deplacement();">

Merci d'avance pour votre aide

Bonjour, ça marche :

Code:

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>

essaie ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script language="Javascript" type="text/javascript">  </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.

Sinon encore plus simple :

Code:

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);">

18/10/2005, 13h11
KiLVaiDeN

Salut Mr.N :)

Tu oublies l'attribut "style" il me semble.
18/10/2005, 13h11
krfa1

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???
18/10/2005, 13h13
KiLVaiDeN

Tu peux utiliser les evenements onMouseDown(bouton appuyé) et onMouseUp(bouton relaché), qui sont des composantes de onClick :)
18/10/2005, 13h17
Mr N.

Citation:

Envoyé par KiLVaiDeN

Salut Mr.N :)

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

:oops: je devrait tourner 7 fois le clavier dans ma bouche avant de taper !
18/10/2005, 13h20
KiLVaiDeN

T'arrives à faire tourner le clavier dans ta bouche ? :lol: Trop fort !

Mais c'est pas grave, l'erreur est humaine, et l'humain est une erreur !
18/10/2005, 13h23
krfa1

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.

Citation:

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? :D

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

Alors le voici

Code:

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();">

18/10/2005, 13h38
Mr N.

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

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:

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();">

18/10/2005, 14h27
Mr N.

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.

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:

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

21/10/2005, 11h02
krfa1

UP