Discussion :

[pedouille]

J'essaye de creer un objet "fenetre" qui simule le fonctionnement d'une fenetre dans un navigateur web, et j'ai quelques problèmes (de syntaxe à mon avis). J'en suis à programmer le drag d'une fenetre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<script type="text/javascript">
<!--
// detection du navigateur
var ie = (document.all)? true:false;
var ns6 = (document.getElementById)? true:false;
//----------------- Classe Fenetre ----------------------
var _id,_left,_top,_width,_height;
function fenetre(_id,_left,_top,_width,_height){
	this.id=_id;
	this.left=_left;
	this.top=_top;
	this.width=_width;
	this.height=_height;
}
	function afficherFenetre() {
		document.write('<div style="border-style:solid; border-width:1px; position: absolute; width: '+this.width+'px; height: '+this.height+'px; z-index: 1; left: '+this.left+'px; top: '+this.top+'px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px" id="'+this.id+'"><div style="position: absolute; width: 135px; height: 19px; z-index: 1; left: 37px; top: 38px" id="couche2"><p align="center"><font size="2">Premier test de fenetre</font></div><div style="border-style:solid; border-width:1px; position: absolute; width: '+this.width+'px; height: 17px; z-index: 1; left: -1px; top: -1px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px; background-color:#0000FF" id="couche3"><p align="right"><input type="button" value="_" name="B3"><input type="button" value="X" name="B1"></div><div style="position: absolute; width: 26px; height: 14px; z-index: 2; left: 55px; top: 65px" id="couche4"><p align="right"><input type="button" value="OK" name="B6"></p></div><div style="position: absolute; width: 34px; height: 22px; z-index: 3; left: 95px; top: 65px" id="couche5"><p align="right"><input type="button" value="Annuler" name="B9"></p></div></div>');
		}
	function fixeTopFenetre(_top) {
		document.getElementById(this.id).style.top=_top;
		this.top=_top;
		}
	function fixeLeftFenetre(_left) {
		document.getElementById(this.id).style.left=_left;
		this.left=_left;
		}
 
	function initialiserFenetre() {
		if(ie){
		// lance ma_fonction quand on appuie sur le bouton de la souris
        document.getElementById(this.id).onmousedown= this.debuterDrag; }
        else if (ns6) {
        // lance ma_fonction quand on appuie sur le bouton de la souris
        document.getElementById(this.id).addEventListener("mousedown",this.debuterDrag, false);}
        }
 
	function debuterDragFenetre(e){ //le e indique au programme qu'il utilise les evenements
		if (ie) {
            //Récupération de la position de la souris
            window.lastX=event.clientX;
            window.lastY=event.clientY;
            // lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
            document.onmousemove= this.doDrag;
            // lance finirDrag quand on relache le bouton de la souris
            document.onmouseup= this.finirDrag; }
        else if (ns6) {
            //Récupération de la position de la souris
            window.lastX=e.clientX;
            window.lastY=e.clientY;
            // lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
            window.onmousemove=this.doDrag;
            // lance endDrag quand on relache le bouton de la souris
            window.onmouseup=this.finirDrag;}
        }
 
// Paramétrage du déplacement des Divs-Layers et des onmousemove & onmouseup pendant le onmousedown
	function doDragFenetre(e) {
		if (ie) {
            // Calcul de l'écart de position de la souris
            var difX=event.clientX-window.lastX;
            var difY=event.clientY-window.lastY;
            //Récupération de la position du div et ajout de l'écart de position de la souris
            var newX1 = parseInt(this.left)+difX;
            var newY1 = parseInt(this.top)+difY;
            // Assignation des nouvelles coordonnées au div
            this.fixeLeft(newX1+"px");
            this.fixeTop(newY1+"px");
            //Assignation de l'anciènne position de la souris
            window.lastX=event.clientX;
            window.lastY=event.clientY; }
         else if (ns6) {
            // Calcul de l'écart de position de la souris
            var difX=e.clientX-window.lastX;
            var difY=e.clientY-window.lastY;
            //Récupération de la position du div et ajout de l'écart de position de la souris
            var newX1 = parseInt(this.left)+difX;
            var newY1 = parseInt(this.top)+difY;
            // Assignation des nouvelles coordonnées au div
            this.fixeLeft(newX1+"px");
            this.fixeTop(newY1+"px");
            //Assignation de l'anciènne position de la souris
            window.lastX=e.clientX;
            window.lastY=e.clientY; } 
	}
	function finirDragFenetre(e) {
		if (ie) {
            //Réinitialisation du onmousemove
            document.onmousemove=null; }
        else if (ns6) {
            //Réinitialisation du onmousemove
            window.onmousemove=null; }
    }
 
fenetre.prototype.afficher = afficherFenetre;
fenetre.prototype.fixeTop = fixeTopFenetre;
fenetre.prototype.initialiser = initialiserFenetre;
fenetre.prototype.debuterDrag = debuterDragFenetre;
fenetre.prototype.doDrag = doDragFenetre;
fenetre.prototype.fixeLeft = fixeLeftFenetre;
fenetre.prototype.finirDrag = finirDragFenetre;
//---------------- Fin de classe fenetre ----------------
 
//----------------debut du programme reel----------------
var fenMsg=new fenetre("couche1",10,10,203,103);
 
fenMsg.afficher();
 
//Init des variables,des Divs-Layers, et du onmousedown
function start() {
	fenMsg.initialiser();
	}
 
//-->
</script>

Tout va bien jusqu'au moment où je souhaite déplacer la fenetre :

Dans la fonction debuterDrag, à la ligne : document.onmousemove= this.doDrag;

Il m'indique le message d'erreur suivant :
Non implémenté.

Alors que j'utilise exactement la meme declaration dans la fonction initialiserFenetre().

Donc là,je ne comprend pas bien ce qui se passe.

Merci !
PS : je me suis largement inspiré d'un script trouvé sur je sais plus quel site pour programmer ça.

[siddh]

ta methode s'appelle pas doDrag mais doDragFenetre non ?

[javatwister]

essaie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.onmousemove=function(){this.doDrag};

mais je n'ai pas regardé tes objets en détail!

[pedouille]

Merci pour l'aide.

J'ai essayé de rajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
=function(){this.doDrag;};

il n'y a plus de message d'erreur, mais il ne se passe rien, ce qui me fait penser qu'il n'y a pas d'appel à la fonction.

D'autant que si j'applique cette syntaxe dans la fonction initialiser, qui apelle demarrerDrag, j'observe exactement le meme resultat, c'est à dire qu'il ne se passe rien :

Pourquoi cette syntaxe ne marche-t-elle pas ?

Pour siddh :

en fait, la fonction s'apelle doDragFenetre, mais je l'ajoute aux méthodes de fenetre sous le nom "doDrag" avec la ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
fenetre.prototype.doDrag = doDragFenetre;

[javatwister]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.doDrag();

il s'agit d'une méthode...

mais de toute façon, tu vas sûrement avoir un pbm pour récupérer l'événement;

[pedouille]

J'ai essayé de retourner le probleme dans tous les sens, et il s'avère en fait que le "this" n'est curieusement pas défni dans la fonction debuterDrag...

Je pense que j'ai du rater un chapitre sur la gestion des objets en javascript, et donc je vais essayer de trouver une doc efficace à ce sujet. D'ailleurs si vous en connaissez... (en français ou anglais).

merci !

[javatwister]

en fait, this désigne ici le gestionnaire d'événement... c'est-à-dire l'objet window;

[pedouille]

D'accord. Donc, en effet, j'avais rater quelquechose. Cependant, je trouve le comportement du javascript un peu bizarre, mais ça doit etre dû à la gestion des evenements.

Je vais donc chercher de ce coté là.

merci.