Aller au menu - Aller au contenu
Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

Déplacer un div

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Aure77 # Posté le 21/01/2009 à 17:10:38
Avatar

Études : ESGI-ICAN
j'ai le code suivant, si je met directement l'id sa fonctionne mais si je le passe en paramètre de la fonctionne ça ne fonctionne plus:
Code : HTML
 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<style>
#horloge
{
float:left;
font-size:18px;
display:block;
border:2px solid blue;
width:300px;
background:blue;
color:white;
}
</style>
<script type="text/javascript">
var bougeX;
var bougeY;
function bouger(evenement,id)
{
document.onmousemove = bouger;
bougeX = evenement.pageX;
bougeY = evenement.pageY;
document.getElementById(id).style.marginLeft = bougeX-10 +"px";
document.getElementById(id).style.marginTop = bougeY-10 + "px";
}

function stop_bouge(evenement,id)
{
document.onmousemove = null;
bougeX = evenement.pageX;
bougeY = evenement.pageY;
document.getElementById(id).style.marginLeft = bougeX-10 +"px";
document.getElementById(id).style.marginTop = bougeY-10 + "px";
}

</script>
</head>
<body>
<div id="horloge" onmousedown = "bouger(this,'horloge');" onmouseup = "stop_bouge(this,'horloge');">
<h2>Test</h2>
Bonjour ceci est un test!
Bouger...
display
aa
CCCCCCCCCCCC......
</div>
<div id="horloge2" onmousedown = "bouger(this,'horloge2');" onmouseup = "stop_bouge(this,'horloge2');">
<h2>Test</h2>
Bonjour ceci est un test!
Bouger...
display
aa
CCCCCCCCCCCC......
</div>
<div id="horloge3" onmousedown = "bouger(this,'horloge3');" onmouseup = "stop_bouge(this,'horloge3');">
<h2>Test</h2>
Bonjour ceci est un test!
Bouger...
display
aa
CCCCCCCCCCCC......
</div>
</body>
</html>

Ce code permet de deplacer un div à la souris
je ne comprend pas... je pense que c'est à cause du event, mais je ne vois pas comment faire...
Le Site des ProZer0
 
Publicité # Posté le 21/01/2009 à 17:10:38

Hors ligne Tiller # Posté le 21/01/2009 à 17:19:51
Seek me Elsewhere, Thanks
Avatar
close

Ville : Toulouse
Pays : France métropolitaine
Tu enregistres le "this" récupérer la première fois dans une variable, puis tu utilises cette variable pour le reste du temps

Ps: Façon très moche de faire a mon gout ton code.
Édité le 21/01/2009 à 17:21:42 par Tiller
A time for everything and everything in its time.
 
Hors ligne Elias # Posté le 21/01/2009 à 17:54:37
Aurë, entuluy'va !
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Le problème vient de ta façon d'ajouter l'évènement onmousemove sur le document. Tu ne peux pas t'y prendre ainsi. On attache une action à un évènement de cette façon :
Code : JavaScript
1
element.onmousemove = function(){ mafonction(); };

Tu dois donc modifier ta ligne en ce sens :
Code : JavaScript
1
document.onmousemove = function(e){ bouger(e, id); };

Sans cela, la fonction bouger() est appelée une seule fois lors de la lecture de cette ligne mais rien n'est effectué lors du déplacement de la souris.
Aurë entuluy'va !
Image utilisateur www.twiip.ch
quelques scripts pouvant servir (ou pas)
 
Hors ligne Aure77 # Posté le 21/01/2009 à 19:19:54
Avatar

Études : ESGI-ICAN
ça ne fonctionne pas... ou ya t'il une erreur de synthaxe?

Code : HTML
 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<style>
#horloge
{
float:left;
font-size:18px;
display:block;
border:2px solid blue;
width:300px;
background:blue;
color:white;
}
</style>
<script type="text/javascript">
var bougeX;
var bougeY;
function bouger(evenement,id)
{
document.onmousemove = bouger;
bougeX = evenement.pageX;
bougeY = evenement.pageY;
document.getElementById(id).style.marginLeft = bougeX-10 +"px";
document.getElementById(id).style.marginTop = bougeY-10 + "px";
}

function stop_bouge(evenement,id)
{
document.onmousemove = null;
bougeX = evenement.pageX;
bougeY = evenement.pageY;
document.getElementById(id).style.marginLeft = bougeX-10 +"px";
document.getElementById(id).style.marginTop = bougeY-10 + "px";
}

</script>
</head>
<body>
<div id="horloge" onmousedown = "funtion(evenement){bouger(evenement,'horloge');};" onmouseup = "function(evenement){stop_bouge(evenement,'horloge');};">
<h2>Test</h2>
Bonjour ceci est un test!
Bouger...
display
aa
CCCCCCCCCCCC......
</div>
<div id="horloge2" onmousedown = "funtion(evenement){bouger(evenement,'horloge2');};" onmouseup = "function(evenement){stop_bouge(evenement,'horloge2');};">
<h2>Test</h2>
Bonjour ceci est un test!
Bouger...
display
aa
CCCCCCCCCCCC......
</div>
<div id="horloge3" onmousedown = "funtion(evenement){bouger(evenement,'horloge3');};" onmouseup = "function(evenement){stop_bouge(evenement,'horloge3');};">
<h2>Test</h2>
Bonjour ceci est un test!
Bouger...
display
aa
CCCCCCCCCCCC......
</div>
</body>
</html>


Je pense que le problème viens de la:
Code : JavaScript
1
2
3
4
5
function bouger(evenement,id)
{
document.onmousemove = bouger;
...
}

car je rapelle bouger sans aucun paramètres... mais je sais pas comment faire...
Édité le 21/01/2009 à 19:21:54 par Aure77
Le Site des ProZer0
 
Hors ligne Tiller # Posté le 21/01/2009 à 19:30:26
Seek me Elsewhere, Thanks
Avatar
close

Ville : Toulouse
Pays : France métropolitaine
T'as mal compris ce qu'il t'a dit, relit--
A time for everything and everything in its time.
 
Hors ligne SRL Killing # Posté le 21/01/2009 à 21:00:51
Call me : "SRL Killing"
Avatar

Ville : Castres
Pays : France métropolitaine
Pourquoi vous passer pas par des Listeners, c'est pas mieux ?
Image utilisateur



- Je suis le meilleur programmeur du monde.
- Presque, le contraire
- Le meilleur contraire du monde ??
 
Hors ligne Aure77 # Posté le 21/01/2009 à 21:35:53
Avatar

Études : ESGI-ICAN
Perso je voit pas!Je débute en javascript et je tâtonne un peu...
Le Site des ProZer0
 
Hors ligne Darkodam # Posté le 22/01/2009 à 03:30:43
Pour Aiur
Avatar

Ville : Limours
Pays : France métropolitaine
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
onmousedown = "funtion(evenement){bouger(evenement,'horloge');};"

Tu ne fait absolument rien avec cette ligne, Tu fait juste une fonction qui ne s'exécute pas. De plus, quand tu passes par un attribut pour utiliser un évènement, l'objet gérant l'évènement doit s'appeller event. Essai sous cette forme :
Code : HTML
1
<div id="horloge" onmousedown = "bouger(event,'horloge');" ...>


Et change ta ligne 20 par :
Code : JavaScript
1
document.onmousemove = function(e) {bouger(e, id);};

ça devrait aller mieux.
\o/ Tutoriel sur les closures \o/


!JQuery N'EST PAS UNE SOLUTION!
c'est un moyen


Mammon s'était endormi. Et la bête réincarnée se répandit sur la terre et son nombre se fit légion. Et ils parlèrent au Temps et ils firent l'offrande de leur moisson au feu, avec la ruse des renards. Et ils bâtirent un nouveau monde à leur image comme le promettaient les paroles sacrées, et ils parlèrent de la bête avec leurs enfants. Lorsque Mammon se réveilla, voilà ! ce n'était plus rien qu'un disciple.
d'après Le Livre de Mozilla, 11:9
(10e Édition)

the cake is a lie
the cake is a lie
the cake is a lie
the cake is a lie
 
Hors ligne Aure77 # Posté le 22/01/2009 à 10:43:57
Avatar

Études : ESGI-ICAN
Ok j'ai mieux compris maintenant! et ça fonctionne
PS: Y a t'il une propriété CSS pour que mes div se superpose?car quand j'en bouge 1, sa déplace l'autre comme si c'était des blocs qu'on pousse....
Le Site des ProZer0
 
Hors ligne Elias # Posté le 22/01/2009 à 13:18:40
Aurë, entuluy'va !
Avatar
Tu dois sortir la div du flux en la mettant en position absolute, et du coup gérer le déplacement en modifiant non pas les propriétés marginLeft et marginTop, mais left et top.
Tu peux regarder ce script, un peu plus complexe, mais en jetant un oeil à son code tu y trouveras peut-être des choses utiles pour gérer ton déplacement : http://twiip.ch/dev/dragndrop.php
Il gère la distance entre la souris et le coin de l'élément pour ne pas mettre le coin de l'élément à la place de la souris, et il permet de rendre un objet déplaçable uniquement dans un cadre précis (dans les limites d'une autre div). Il joue également sur le z-index des éléments pour mettre celui que l'on déplace par-dessus les autres.
Édité le 22/01/2009 à 13:21:58 par Elias
Aurë entuluy'va !
Image utilisateur www.twiip.ch
quelques scripts pouvant servir (ou pas)
 
Hors ligne Erwan.L # Posté le 18/03/2010 à 10:01:30

Salut Aure77

Si tu débutes en javascript, c'est assez courageux de vouloir mettre en place un drag & drop.
J'ai moi aussi un script tout prêt à te proposer. Il est abondamment commenté (en français). Je pense que ça pourra te faire un bon exemple.
Et si tu peines trop, tu pourrais toujours l'utiliser tel quel.

Tu trouveras le script et son mode d'emploi sur cette page : Cliquer-Glisser.

Bon courage.

Retour au forum "Javascript" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx