Event sous firefox

**mondoti** · 30/07/2009, 16h22

Bonjour à tous,

Après quelques recherches sur internet je n'arrive toujours pas à résoudre mon problème : j'ai un script qui marche sous ie mais pas sur firefox. Mon script consiste à rendre un élément draggable qui peut être déposé dans une zone de drop.

J'appelle 2 fonction quand je clic et declic sur un élément draggable avec ma souris :

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
 
document.onmousemove = Drag;
document.onmouseup = Drop;
...
 
function Drop(e)
{
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
var num = IsInDropZone(evtTarget);
alert(num);
...
 
function IsInDropZone(evtTarget)
{
var result = -1;
 
for(i = 0; i < dropZoneArray.length; i++)
{
if(evtTarget.id == dropZoneArray[i])
{
result = i;
break;
}
}

Sur ie pas de problème lors du depot dans la zone de drop, ma variable num est correcte. Pas sur firefox. Donc j'ai mis des alert un peu partout dans mon code et j'ai découvert que mon evtTarget n'est pas le meme sous ie et ff. Sous ff mon evtTarget fais référence, lorsque je relache le bouton de ma souris, à mon élèment draggable alors que sous ie il fait référence à la zone de drop ( ce que je veux ).

Bon je sais pas si j'ai été très clair ( ça l'est pas dans ma tête^^) mais est ce qu'il y a un moyen d'avoir un event qui soit le même pour firefox et ie ( et de préférence qui ressemble à celui d'ei )?

Merci.

**emmanuel.remy** · 30/07/2009, 16h54

Salut,

Tu peux passer un code fonctionnel stp que je teste de mon côté ?

ERE

**mondoti** · 31/07/2009, 09h50

Voila mon script :

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
 
var mouseState = 'up';
var clone = null; 
var dropZoneArray = new Array(20); 
 
//zones de drop 
 
for(i = 0; i < dropZoneArray.length; i++){
	var x = i+1;
	dropZoneArray[i] = 'Reception' + x;
}
var uniqueNumber = 1; 
 
// remise de la couleur de départ de la zone de drop 
 
function ResetColor(num) 
{ 
   	document.getElementById('Reception' + num).className = 'DefaultDropZoneColor';    
}
 
// validation en vert de l'element
 
function ResetColorDrag() 
{ 
   	document.getElementById(obj.id).className = 'CorrectdragElement';    
}
 
// indique la zone que l'on survole
 
function IsInDropZone(evtTarget) 
{     
    var result = -1;  
 
    for(i = 0; i < dropZoneArray.length; i++) 
    {
        if(evtTarget.id == dropZoneArray[i]) 
        {
            result = i;
           // alert("evt " +evtTarget.id);
 
            break; 
        }
    } 
 
  //  alert("evt " +evtTarget.id + " result " + result);
    //alert("result " + result); 
    return result;
}
 
function MakeElementDraggable(obj) 
{    
    var startX = 0; 
    var startY = 0; 
 
// initialisation, création du clone
 
function InitiateDrag(e) 
{    
    mouseState = 'down';
 
    var evt = e || window.event;
 
    startX = parseInt(evt.clientX); 
    startY = parseInt(evt.clientY);    
 
    clone = obj.cloneNode(true);
 
    clone.style.position = 'absolute';   
    clone.style.top = parseInt(startY) + 'px';
    clone.style.left = parseInt(startX) + 'px';  
 
 
    document.body.appendChild(clone);     
 
    document.onmousemove = Drag;
    document.onmouseup = Drop;  
 
    return false;             
}
 
function Drop(e) 
{
       var evt = e || window.event;
       var evtTarget = evt.target || evt.srcElement;
       var num = IsInDropZone(evtTarget);
       //alert(num);
       num = num+1;
 
       var dZone = document.getElementById("Reception" + num); 
     //  alert(dZone);
 
        if(dZone != null){
 
 
        if(  clone.attache == dZone.id ) {
                 // ajoute dans la zone de drop lorsque l'element est correcte    
 
                AddObjet(num);
        		document.getElementById(obj.id).className = 'CorrectdragElement';
 
          }    
          ResetColor(num); 
 
         }
        document.onmouseup = null; 
        document.onmousemove = null;               
 
        document.body.removeChild(clone); 
 
        mouseState = 'up';
 
       return false;
 
}
 
function AddObjet(num) 
{   
 
   var title = GetProductTitle();
 
   // var num = IsInDropZone(evtTarget);                 
 
 
    var dZone = document.getElementById('Reception' + num);     
    var textNode = document.createTextNode(title);    
 
    var item = document.createElement('div'); 
    item.id = 'itemDiv' + uniqueNumber; 
 
    item.appendChild(textNode); 
	disableSelection(item);
    dZone.appendChild(item);  
 
    uniqueNumber++; 
}
 
// récupère le titre
 
function GetProductTitle() 
{
 
    var title = '';   
 
    if(IsFireFox()) 
    {
    title = clone.childNodes[1].innerHTML; 
 
    }
 
    else { title = clone.childNodes[0].innerHTML;  }    
 
   return title; 
}
 
 
function IsFireFox() 
{
    if(navigator.appName == 'Netscape') 
     return true; 
     else return false; 
}
 
 
function Drag(e) 
{
 
    if(mouseState == 'down') {
 
 
    var evt = e || window.event;
 
    var evtTarget = evt.target || evt.srcElement;    
 
    clone.style.top = evt.clientY + 'px'; 
    clone.style.left = evt.clientX + 'px';
 
     // verifie si on est sur une zone de drop
    if(IsInDropZone(evtTarget)>-1) 
    {       
        evtTarget.className = 'highlightDropZone';       
    }
 
    else 
    {  
 
    	for(i = 0; i < dropZoneArray.length; i++) {
			var x = i+1;
    		if(document.getElementById('Reception' + x)!= null){
        	ResetColor(x);
       		}
 
    	}
 
    }
 
    } 
 
 
}
 
 
obj.onmousedown = InitiateDrag;
 
return false;
}
 
function disableSelection(element) {
element.onselectstart = function() {
return false;
};
element.unselectable = "on";
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}

La forme des div draggable et pour les zones de drop :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div reception="1" style="position:relative;  width:150px; height:150px" class="DefaultDropZoneColor" id="Reception1"></div>
<script language="javascript">	disableSelection(document.getElementById('Reception1'));
</script>
 
<div objet="2" class="dragElement" name="fourmi" attache="Reception3" id="tomove2">
<label titre="fourmi">fourmi</label>
</div>
<script language="javascript">					MakeElementDraggable(document.getElementById('tomove2'));				disableSelection(document.getElementById('tomove2'));
</script>

Pour les event lorsque je fais des alert dans la fonction Drop(e) pour les afficher, j'ai [object] pour ie et [object MouseEvent] pour firefox. Est ce que ça pourrais venir de là ?

Merci pour ton aide^^.

**emmanuel.remy** · 31/07/2009, 11h27

Salut,

2 soucis à mon avis:

d'abord quand tu fais ton cloneNode, tu ne changes pas l'id de l'élément cloné, moralité il a le même id que l'élément source du drag

ensuite tu déplaces l'élément exactement aux coordonnées de la souris; moralité le mouseup doit être détecté pour l'élément déplacé. Change ce code de la focntion Drag:

Code :

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

1
2
    clone.style.top = (evt.clientY+20) + 'px'; 
    clone.style.left = (evt.clientX+20) + 'px';

ERE

**mondoti** · 31/07/2009, 11h53

Effectivement l'id du clone n'était pas unique
Modif dans InitiateDrag(e) :

Code :

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

1
2
3
4
 
    clone = obj.cloneNode(true);
    clone.id = "clone" + idclone;
    idclone++;

J'ai aussi modifié le déplacement de l'élément mais j'ai le même problème sous firefox, il n'accepte pas le depot sur la zone de drop.

**emmanuel.remy** · 31/07/2009, 12h20

J'ai testé de mon côté avec FF, l'id du target de DROP est bien reception1, et tout fonctionne correctement.

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  <!--
   .highlightDropZone {background-color: rgb(153,102,204);}
   .DefaultDropZoneColor {background-color: rgb(153,153,153);}
 
  //-->
  </style>
  <script type="text/javascript">
 
var mouseState = 'up';
var clone = null; 
var dropZoneArray = new Array(20); 
 
//zones de drop 
 
for(i = 0; i < dropZoneArray.length; i++){
	var x = i+1;
	dropZoneArray[i] = 'Reception' + x;
}
var uniqueNumber = 1; 
 
// remise de la couleur de départ de la zone de drop 
 
function ResetColor(num) 
{ 
   	document.getElementById('Reception' + num).className = 'DefaultDropZoneColor';    
}
 
// validation en vert de l'element
 
function ResetColorDrag() 
{ 
   	document.getElementById(obj.id).className = 'CorrectdragElement';    
}
 
// indique la zone que l'on survole
 
function IsInDropZone(evtTarget) 
{     
    var result = -1;  
 
    for(i = 0; i < dropZoneArray.length; i++) 
    {
        if(evtTarget.id == dropZoneArray[i]) 
        {
            result = i;
           // alert("evt " +evtTarget.id);
 
            break; 
        }
    } 
 
    //alert("evt " +evtTarget.id + " result " + result);
    //alert("result " + result); 
    return result;
}
 
function MakeElementDraggable(obj) 
{    
    var startX = 0; 
    var startY = 0; 
 
// initialisation, création du clone
 
function InitiateDrag(e) 
{    
    mouseState = 'down';
 
    var evt = e || window.event;
 
    startX = parseInt(evt.clientX); 
    startY = parseInt(evt.clientY);    
 
    clone = obj.cloneNode(true);
   clone.id="Robert";
    clone.style.position = 'absolute';   
    clone.style.top = (parseInt(startY)+15) + 'px';
    clone.style.left = (parseInt(startX)+15) + 'px';  
 
 
    document.body.appendChild(clone);     
 
    document.onmousemove = Drag;
    document.onmouseup = Drop;  
 
    return false;             
}
 
function Drop(e) 
{
       var evt = e || window.event;
       var evtTarget = evt.target || evt.srcElement;
 
       //console.log(evtTarget);
       //console.log(evt);
       var num = IsInDropZone(evtTarget);
       //alert(num);
       num = num+1;
 
       var dZone = document.getElementById("Reception" + num); 
     //  alert(dZone);
 
        if(dZone != null){
 
 
        if(  clone.attache == dZone.id ) {
                 // ajoute dans la zone de drop lorsque l'element est correcte    
 
                AddObjet(num);
        		document.getElementById(obj.id).className = 'CorrectdragElement';
 
          }    
          ResetColor(num); 
 
         }
        document.onmouseup = null; 
        document.onmousemove = null;               
 
        document.body.removeChild(clone); 
 
        mouseState = 'up';
 
       return false;
 
}
 
function AddObjet(num) 
{   
 
   var title = GetProductTitle();
 
   // var num = IsInDropZone(evtTarget);                 
 
 
    var dZone = document.getElementById('Reception' + num);     
    var textNode = document.createTextNode(title);    
 
    var item = document.createElement('div'); 
    item.id = 'itemDiv' + uniqueNumber; 
 
    item.appendChild(textNode); 
	disableSelection(item);
    dZone.appendChild(item);  
 
    uniqueNumber++; 
}
 
// récupère le titre
 
function GetProductTitle() 
{
 
    var title = '';   
 
    if(IsFireFox()) 
    {
    title = clone.childNodes[1].innerHTML; 
 
    }
 
    else { title = clone.childNodes[0].innerHTML;  }    
 
   return title; 
}
 
 
function IsFireFox() 
{
    if(navigator.appName == 'Netscape') 
     return true; 
     else return false; 
}
 
 
function Drag(e) 
{
 
    if(mouseState == 'down') {
 
 
    var evt = e || window.event;
 
    var evtTarget = evt.target || evt.srcElement;    
 
    clone.style.top = (evt.clientY+20) + 'px'; 
    clone.style.left = (evt.clientX+20) + 'px';
 
     // verifie si on est sur une zone de drop
    if(IsInDropZone(evtTarget)>-1) 
    {       
        evtTarget.className = 'highlightDropZone';       
    }
 
    else 
    {  
 
    	for(i = 0; i < dropZoneArray.length; i++) {
			var x = i+1;
    		if(document.getElementById('Reception' + x)!= null){
        	ResetColor(x);
       		}
 
    	}
 
    }
 
    } 
 
 
}
 
 
obj.onmousedown = InitiateDrag;
 
return false;
}
 
function disableSelection(element) {
element.onselectstart = function() {
return false;
};
element.unselectable = "on";
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}
 
  </script>
 
  </head>
  <body>
<div reception="1" style="position:relative;  width:150px; height:150px" class="DefaultDropZoneColor" id="Reception1">Zone de Drop</div>
<script language="javascript">	disableSelection(document.getElementById('Reception1'));
</script>
 
<div objet="2" class="dragElement" name="fourmi" attache="Reception3" id="tomove2">
<label titre="fourmi">fourmi</label>
</div>
<script language="javascript">					MakeElementDraggable(document.getElementById('tomove2'));				disableSelection(document.getElementById('tomove2'));
</script>
 
  </body>
</html>

ERE

**mondoti** · 31/07/2009, 14h25

bon je dois passer à coté de quelque chose...

J'ai réessayer avec le code que tu as donné, j'ai juste changer l'attribut attache du div fourmi en attache="Reception1" pour qu'elle soit accepté par la zone de drop ( et qu'elle soit ajouter a la zone ) et ça ne marche toujours pas sous ff ( seulement sous ie )

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  <!--
   .highlightDropZone {background-color: rgb(153,102,204);}
   .DefaultDropZoneColor {background-color: rgb(153,153,153);}
 
  //-->
  </style>
  <script type="text/javascript">
 
var mouseState = 'up';
var clone = null; 
var dropZoneArray = new Array(20); 
 
//zones de drop 
 
for(i = 0; i < dropZoneArray.length; i++){
	var x = i+1;
	dropZoneArray[i] = 'Reception' + x;
}
var uniqueNumber = 1; 
 
// remise de la couleur de départ de la zone de drop 
 
function ResetColor(num) 
{ 
   	document.getElementById('Reception' + num).className = 'DefaultDropZoneColor';    
}
 
// validation en vert de l'element
 
function ResetColorDrag() 
{ 
   	document.getElementById(obj.id).className = 'CorrectdragElement';    
}
 
// indique la zone que l'on survole
 
function IsInDropZone(evtTarget) 
{     
    var result = -1;  
 
    for(i = 0; i < dropZoneArray.length; i++) 
    {
        if(evtTarget.id == dropZoneArray[i]) 
        {
            result = i;
           // alert("evt " +evtTarget.id);
 
            break; 
        }
    } 
 
    //alert("evt " +evtTarget.id + " result " + result);
    //alert("result " + result); 
    return result;
}
 
function MakeElementDraggable(obj) 
{    
    var startX = 0; 
    var startY = 0; 
 
// initialisation, création du clone
 
function InitiateDrag(e) 
{    
    mouseState = 'down';
 
    var evt = e || window.event;
 
    startX = parseInt(evt.clientX); 
    startY = parseInt(evt.clientY);    
 
    clone = obj.cloneNode(true);
   clone.id="Robert";
    clone.style.position = 'absolute';   
    clone.style.top = (parseInt(startY)+15) + 'px';
    clone.style.left = (parseInt(startX)+15) + 'px';  
 
 
    document.body.appendChild(clone);     
 
    document.onmousemove = Drag;
    document.onmouseup = Drop;  
 
    return false;             
}
 
function Drop(e) 
{
       var evt = e || window.event;
       var evtTarget = evt.target || evt.srcElement;
 
       //console.log(evtTarget);
       //console.log(evt);
       var num = IsInDropZone(evtTarget);
       //alert(num);
       num = num+1;
 
       var dZone = document.getElementById("Reception" + num); 
     //  alert(dZone);
 
        if(dZone != null){
 
 
        if(  clone.attache == dZone.id ) {
                 // ajoute dans la zone de drop lorsque l'element est correcte    
 
                AddObjet(num);
        		document.getElementById(obj.id).className = 'CorrectdragElement';
 
          }    
          ResetColor(num); 
 
         }
        document.onmouseup = null; 
        document.onmousemove = null;               
 
        document.body.removeChild(clone); 
 
        mouseState = 'up';
 
       return false;
 
}
 
function AddObjet(num) 
{   
 
   var title = GetProductTitle();
 
   // var num = IsInDropZone(evtTarget);                 
 
 
    var dZone = document.getElementById('Reception' + num);     
    var textNode = document.createTextNode(title);    
 
    var item = document.createElement('div'); 
    item.id = 'itemDiv' + uniqueNumber; 
 
    item.appendChild(textNode); 
	disableSelection(item);
    dZone.appendChild(item);  
 
    uniqueNumber++; 
}
 
// récupère le titre
 
function GetProductTitle() 
{
 
    var title = '';   
 
    if(IsFireFox()) 
    {
    title = clone.childNodes[1].innerHTML; 
 
    }
 
    else { title = clone.childNodes[0].innerHTML;  }    
 
   return title; 
}
 
 
function IsFireFox() 
{
    if(navigator.appName == 'Netscape') 
     return true; 
     else return false; 
}
 
 
function Drag(e) 
{
 
    if(mouseState == 'down') {
 
 
    var evt = e || window.event;
 
    var evtTarget = evt.target || evt.srcElement;    
 
    clone.style.top = (evt.clientY+20) + 'px'; 
    clone.style.left = (evt.clientX+20) + 'px';
 
     // verifie si on est sur une zone de drop
    if(IsInDropZone(evtTarget)>-1) 
    {       
        evtTarget.className = 'highlightDropZone';       
    }
 
    else 
    {  
 
    	for(i = 0; i < dropZoneArray.length; i++) {
			var x = i+1;
    		if(document.getElementById('Reception' + x)!= null){
        	ResetColor(x);
       		}
 
    	}
 
    }
 
    } 
 
 
}
 
 
obj.onmousedown = InitiateDrag;
 
return false;
}
 
function disableSelection(element) {
element.onselectstart = function() {
return false;
};
element.unselectable = "on";
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}
 
  </script>
 
  </head>
  <body>
<div reception="1" style="position:relative;  width:150px; height:150px" class="DefaultDropZoneColor" id="Reception1">Zone de Drop</div>
<script language="javascript">	disableSelection(document.getElementById('Reception1'));
</script>
 
<div objet="2" class="dragElement" name="fourmi" attache="Reception1" id="tomove2">
<label titre="fourmi">fourmi</label>
</div>
<script language="javascript">					MakeElementDraggable(document.getElementById('tomove2'));				disableSelection(document.getElementById('tomove2'));
</script>
 
  </body>
</html>

**emmanuel.remy** · 31/07/2009, 14h43

Ok pour ce second souci ,

Fonction Drop:

Code :

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

if(clone.getAttribute("attache") == dZone.id ) {

à la place de

Code :

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

if( clone.attache == dZone.id ) {

L'accès aux attributs est un peu galère selon les navigateurs...

ERE

**mondoti** · 31/07/2009, 14h59

Aaaah c'est ça !!!

Merci beaucoup

**emmanuel.remy** · 31/07/2009, 15h05

Juste pour ton info, sous FF 3.0 le Drag laisse une petite trainée à l'écran. Mais peut-être que c'est dû à ma carte graphique.

Bon dev,

ERE

Event sous firefox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager