Javascript et POO

Javascript et POO - HTML/CSS - Programmation

Marsh Posté le 22-02-2007 à 02:08:55    

Bonjour,  
j'ai un problème avec la POO et Javascript... Je chercher à développer une classe qui me permettra ensuite de déplacer librement un élément HTML donné en paramètres.
 
La classe DragElement avec le constructeur et qq méthodes :

Code :
  1. // Constructeur
  2. var DragElement = function(elem)
  3. {
  4. this.element = elem;
  5. this.drag = false;
  6. this.mouseX = 0;
  7. this.mouseY = 0;
  9. this.element.onmousemove = this.move;
  10. this.element.onmousedown = this.dragStart;
  11. this.element.onmouseup = this.dragStop;
  12. }
  14. // Quand l'utilisateur clique sur l'élément, maintient le clic et bouge la souris pour effectuer le déplacement
  15. DragElement.prototype.move = function()
  16. {
  17.              // A faire
  18. }
  20. // Quand l'utilisateur clique sur l'élément (associé à l'évènement onmousedown)
  21. DragElement.prototype.dragStart = function()
  22. {
  23. alert(this.element);
  24. this.drag = true;
  25. this.mouseX = getCoordsMouseX();
  26. this.mouseY = getCoordsMouseY();
  27. }
  29. // Quand l'utilisateur relâche la souris (associé à l'év-ènement onmouseout)
  30. DragElement.prototype.dragStop = function()
  31. {
  32. this.drag = false;
  33. }
  35. // Positionne l'élément HTML
  36. DragElement.prototype.positionner = function(x, y)
  37. {
  38. this.element.style.top = y + 'px';
  39. this.element.style.left = x + 'px';
  40. }
  42. // Affiche l'élément HTML (par défaut, il ne l'est pas)
  43. DragElement.prototype.afficher = function()
  44. {
  45. this.element.style.display = 'block';
  46. }
  48. // N'affiche plus l'élément HTML à l'écran
  49. DragElement.prototype.fermer = function()
  50. {
  51. this.drag = false;
  52. this.element.style.display = 'none';
  53. }


 
Mon code HTML :  

Code :
  1. [...]
  2. <div id="box">
  3.     // trucs
  4. </div>


 
Et le code JS pour rendre l'élément 'box' draggable :

Code :
  1. var div = document.getElementById('box');
  2. box = new DragElement(div);
  3. box.afficher();
  4. box.positionner(100, 100);


 
Alors voilà, quand le constructeur est lancé, l'élément div est mémorisé dans this.element.  
 
Et le problème que je rencontre, c'est que quand je clique sur ma box (évènement onmousedown appelé, donc méthode dragStart() appelée en suivant le constructeur), this.element est 'undefined'. Il en va de même avec onmouseup et onmouseover :(
 
J'ai l'impression que les valeurs des propriétés ne sont pas gardées quand on affecte une fonction ou méthode par callback...
 
Quelqu'un peut'il m'éclairer sur ce problème ?  
 
Merci.

Reply

Marsh Posté le 22-02-2007 à 02:08:55   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed