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 :
- // Constructeur
- var DragElement = function(elem)
- {
- this.element = elem;
- this.drag = false;
- this.mouseX = 0;
- this.mouseY = 0;
- this.element.onmousemove = this.move;
- this.element.onmousedown = this.dragStart;
- this.element.onmouseup = this.dragStop;
- }
- // Quand l'utilisateur clique sur l'élément, maintient le clic et bouge la souris pour effectuer le déplacement
- DragElement.prototype.move = function()
- {
- // A faire
- }
- // Quand l'utilisateur clique sur l'élément (associé à l'évènement onmousedown)
- DragElement.prototype.dragStart = function()
- {
- alert(this.element);
- this.drag = true;
- this.mouseX = getCoordsMouseX();
- this.mouseY = getCoordsMouseY();
- }
- // Quand l'utilisateur relâche la souris (associé à l'év-ènement onmouseout)
- DragElement.prototype.dragStop = function()
- {
- this.drag = false;
- }
- // Positionne l'élément HTML
- DragElement.prototype.positionner = function(x, y)
- {
- this.element.style.top = y + 'px';
- this.element.style.left = x + 'px';
- }
- // Affiche l'élément HTML (par défaut, il ne l'est pas)
- DragElement.prototype.afficher = function()
- {
- this.element.style.display = 'block';
- }
- // N'affiche plus l'élément HTML à l'écran
- DragElement.prototype.fermer = function()
- {
- this.drag = false;
- this.element.style.display = 'none';
- }
|
Mon code HTML :
Code :
- [...]
- <div id="box">
- // trucs
- </div>
|
Et le code JS pour rendre l'élément 'box' draggable :
Code :
- var div = document.getElementById('box');
- box = new DragElement(div);
- box.afficher();
- 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.
