Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1352 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Souci en javascript avec un div : drag & drop !?

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Souci en javascript avec un div : drag & drop !?

n°1296933
moon06
Ignorance is bliss
Posté le 01-02-2006 à 20:51:06  profilanswer
 

Bonsoir :)
 
Pour commencer, il faut dire que j'ai jamais vraiment fait de JavaScript ... donc ce que je fais est un peu à tatillon ! Dans le cas présent j'ai récupéré en grosse partie un script d'un site spécialisé ...  
 
Mon problème est le suivant : comme vous pouvez le voir sur http://www.zonehd.net/drag.php , on peut déplacer le div avec la souris. Vous l'avez sûrement remarqué, au premier mouvement, le div se décale tout seul ... ensuite plus de problème, il suit correctement le curseur !
 
Voici le code source au cas où (:D) :
 

Code :
  1. <html>
  2. <style type="text/css">
  3. .transparent {
  4. top:100px;
  5. left:100px;
  6. background-color:#cccccc;
  7. position:absolute;
  8. width:200;
  9. height:200;
  10. cursor:move;
  11. }
  12. .textetransp {
  13. color:#ffffff;
  14. text-decoration:none;
  15. filter: alpha(opacity=100);
  16. opacity:1;
  17. background-color:#336699;
  18. }
  19. </style>
  20. </html>
  21. <body>
  22. <script language="JavaScript1.2">
  23. <!--
  25. var ie=document.all;
  26. var nn6=document.getElementById&&!document.all;
  28. var isdrag=false;
  29. var x,y;
  30. var dobj;
  32. function movemouse(e)
  33. {
  35.   if (isdrag)
  36.   {
  37.  var X = tx - x;
  38.  var Y = ty - y;
  39. //alert(X+' '+Y);
  40. dobj.style.left = nn6 ? e.clientX + X : event.clientX + X;
  41. dobj.style.top  = nn6 ? e.clientY + Y : event.clientY + Y;
  42.    
  43. return false;
  44.   }
  45.  
  46. }
  48. function selectmouse(e)
  49. {
  50.   var fobj       = nn6 ? e.target : event.srcElement;
  51.   var topelement = nn6 ? "HTML" : "BODY";
  53.   while (fobj.tagName != topelement && fobj.className != "transparent" )
  54.   {
  55.     fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  56.   }
  58.   if (fobj.className=="transparent" )
  59.   {
  60.     isdrag = true;
  62. // objet à déplacer
  63.     dobj = fobj;
  64. // espacement gauche de l'objet
  65.     tx = parseInt(dobj.style.left+0);
  66. // espacement droit de l'objet
  67.     ty = parseInt(dobj.style.top+0);
  68. // position x de la souris
  69.     x = nn6 ? e.clientX : event.clientX;
  70. // position y de la souris
  71.     y = nn6 ? e.clientY : event.clientY;
  73.     document.onmousemove=movemouse;
  75.     return false;
  76.   }
  77. }
  79. document.onmousedown=selectmouse;
  80. document.onmouseup=new Function("isdrag=false" );
  82. //-->
  83. </script>
  84. <div class="transparent" id="transp"><br />
  85. <font class="textetransp">Ceci est un essai</font> <br />
  86. <a href="#" onclick="document.getElementById('transp').style.visibility='hidden';">Fermer !</a></div>
  88. </body>
  89. </html>


 
Merci de votre aide par avance :)


Message édité par moon06 le 01-02-2006 à 20:54:18

---------------
- Si les cons volaient, il ferait nuit tout le temps ! -
mood
Publicité
Posté le 01-02-2006 à 20:51:06  profilanswer
 

n°1297049
moon06
Ignorance is bliss
Posté le 01-02-2006 à 22:34:18  profilanswer
 

[:moon06]


---------------
- Si les cons volaient, il ferait nuit tout le temps ! -
n°1297183
moon06
Ignorance is bliss
Posté le 02-02-2006 à 09:58:47  profilanswer
 

euppe encore :)


---------------
- Si les cons volaient, il ferait nuit tout le temps ! -
n°1297238
Pitsy
Posté le 02-02-2006 à 11:22:18  profilanswer
 

Hello,
 
je ne maîtrise pas vraiment à fond le sujet, mais vu qu'il faut que je m'y mette un jour je me suis un peu plongée dans ton code.
Vu le retour à la position 0 0 j'ai supposé qu'il n'arrivais pas à obtenir les coordonnées de départ. Pour une raison que j'ignore, il n'arrive pas à trouver le style.left et style.top depuis ton css (pour la suite ça joue vu qu'ils sont redéfinis dans le code). En plaçant les styles directement dans ta balise id "transp", là ça marche:
 
<div class="transparent" id="transp" style="{top:100px;left:100px;}>
 
En espérant que qqn apportera une explication un peu plus probante et peut-être uen solution moins "bricole" :)
 

n°1297242
moon06
Ignorance is bliss
Posté le 02-02-2006 à 11:27:27  profilanswer
 

j'ai trouvé la solution quelques minutes avant ta réponse et c'est exactement ça :)
 
en fait apparemment il n'arrive pas à récupérer le top et le left s'ils sont définis dans le CSS et non "style=" .. :whistle:
 
merci Pitsy ;)


---------------
- Si les cons volaient, il ferait nuit tout le temps ! -

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Souci en javascript avec un div : drag & drop !?

 

Sujets relatifs
petit probleme javascriptbesoin d un coup de main en programmation javascript
Conversion en javascriptJavascript pour copier donnée dans un champ de form d'une autre frame
recuperer la valeur d'une variable javascript ??Créer une newsletter en flash ou javascript
Evenement javascript qui ne réagit passouci sur vbscript
Parser du XML avec JavascriptFirefox n'aime pas le XML+XSL+Javascript
Plus de sujets relatifs à : Souci en javascript avec un div : drag & drop !?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.068 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR