[Ancien]Page Code Source

**siddh** · 26/04/2006, 11h22

effectivement c'est rigolo mais tu gère pas les effets de bord sur le plus

**javatwister** · 26/04/2006, 12h02

"bord" ?

**siddh** · 26/04/2006, 12h05

effet de bord => quand tu arrive aux extremités.

en gros la t'as un undefined car tu test pas si t es arrivé au bout

**javatwister** · 26/04/2006, 12h07

ah oui, je vois; c'est parce que j'ai changé un signe de sens, pour validation w3c et j'avais fait une tite erreur

il fallait donc lire:

Code :

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

1
2
3
 
 
if(ind>ind2)

bis:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
<script type="text/javascript">
var tab=[];
var t2, ind, ind2;
function arch(t){
if(!t2){
  t2=t
};
if(t.value!=tab[ind]){ 
  tab.push(t.value);
};
ind=tab.length-1;
ind2=ind;
}
 
function nav(sens){
 
switch(sens){
  case "moins" :  if(ind2>0){
     t2.value=tab[--ind2]
    }
    else if(ind2==0){
     t2.value="";
     ind2--
    };
    break;
  case "plus" : if(ind>ind2){
     t2.value=tab[++ind2]
    };
    break;
  default :  t2.value=tab[ind];
    ind2=ind;
    break;
}
}
 
</script>
</head>
<body>
<div style="text-align:center;padding:30px;">
<textarea rows="10" cols="50" onkeyup="arch(this)"></textarea>
<p>
<input type="button" value="avant" onclick="nav('moins')" />
<input type="button" value="après" onclick="nav('plus')" />
<br />
<input type="button" value="texte actuel" onclick="nav()" />
</p>
</div>
</body>
</html>

**javatwister** · 26/04/2006, 12h08

content?

**siddh** · 26/04/2006, 12h21

bha c'est surtout pour les gens qui prendraient ton code sans trop le comprendre et qui pourraient pas le rajouter eux même

**SpaceFrog** · 26/04/2006, 14h48

pas glop le undefined sur la machine a propulser dans le temps ...

**javatwister** · 26/04/2006, 16h56

l'a lu l'erratum le spacefrog?

**siddh** · 26/04/2006, 16h57

je crois pas

**javatwister** · 26/04/2006, 16h57

tiens, voilà ce que ça donne: http://javatwist.imingo.net/histotext.php

**javatwister** · 27/04/2006, 07h19

validateur de dates yyyy/mm/dd:

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
 
<form style="display:none" id="quand" action="">
<p>
 
<input name="a" type="text" size="1" maxlength="4" /> 
<input name="m" type="text" size="1" maxlength="2" /> 
<input name="j" type="text" size="1" maxlength="2" /> 
<input type="button" value="ok" onclick="verif(f['a'].value,f['m'].value,f['j'].value)" /> 
 
</p>
</form>
 
<script type="text/javascript">
 
document.forms["quand"].style.display="block";
var f=document.forms["quand"].elements;
 
function verif(a,m,j){ 
 m-=1;
 d=new Date(a,m,j);
 var rep= (d.getFullYear()!=a || d.getMonth()!=m) ? "date invalide" : "date valide";
 alert(rep); 
} 
 
</script>

**javatwister** · 27/04/2006, 09h29

transférer des éléments d'un conteneur vers un autre et vice-versa;
conçu pour 2 conteneurs;

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title> 
 
<style type="text/css">
 
#c {
margin:80px 0px 80px 100px;
text-align:center;
width:460px;
}
 
#c ul {
padding:0px; 
margin:10px;
border:1px solid;
width:200px;
height:200px;
list-style-type:none;
line-height:20px;
text-align:center;
font-weight:bold;
background-color:#ffff00;
float:left;
}
 
#c li {
width:200px;
color:#ff0000;
}
 
</style>
 
</head> 
 
<body> 
 
<div id="c">
 
<p>
Cliquez sur l'un des chiffres pour tester
</p>
 
 <ul id="z1">
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
 </ul>
 
 <ul id="z2">
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
 </ul>
 
</div>
 
<script type="text/javascript">
 
// abstraction des 2 conteneurs dans un tableau dédié;
var t=[document.getElementById("z1"),document.getElementById("z2")];
var ch;
 
// pour chaque objet "ul"
for(n in t){
 /*création d'une propriété arbitraire "ind"
  dont la valeur est l'indice dans le tableau "t" */
 t[n].ind=n;
 ch=t[n].getElementsByTagName("li");
 
 // pour chaque objet "li"
 for(o in ch){
  // quand on clique dessus  
  ch[o].onclick=function(){
   /* si la propriété "ind" de la liste parente
   a pour valeur "0", on affecte l'élément
   en fin de la liste dont la valeur de "ind" égale "1",
   et vice versa;*/
   t[Math.abs(this.parentNode.ind-1)].appendChild(this)
  }
 }
}
 
</script> 
 
</body>
</html>

**SpaceFrog** · 27/04/2006, 16h52

une solution afin d'eviter les controles de format d'heure, proposer un timePicker avec l'heure déja formattée ...
Voici un premier exemple, lmais je le trouve lent ...

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
 
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Time Picker</title>
 
<script type='text/javascript'>
var times12=new Array()
var times24=new Array()
 
function init(){
var timepick=document.createElement('select')
timepick.id='selTime'
document.body.appendChild(timepick)        
 
for (h=0;h<24;h++){var Heure=(h<13)?h:h-12;
                        Heure=(Heure.toString().length==1)?"0"+Heure:Heure;
                      var periode=(h<13)?"am":"pm";    
    for(m=0;m<60;m++){var mins=(m.toString().length==1)?"0"+m:m;
                        var HU=Heure+":"+mins+" "+periode
                        times12.push(HU)
                        }
                    }
 
for (h=0;h<24;h++){var Heure=(h.toString().length==1)?"0"+h:h;
     for(m=0;m<60;m++){var mins=(m.toString().length==1)?"0"+m:m;
                        var HU=Heure+":"+mins
                        times24.push(HU)
                        }
                    }
populateSelect(12)
document.getElementById('selTime').size='1';
}
 
function populateSelect(choice){
timelist=(choice==12)?times12:times24;
document.getElementById('selTime').options.length=0;
 
for (i=0;i<timelist.length;i++){
                                    var timeline=document.createElement('option');
                                    timeline.value=timelist[i];
                                    timeline.innerHTML=timelist[i];
                                    document.getElementById('selTime').appendChild(timeline);
                    }
            }
 
</script>
</head>
 
<body onload="init()" >
<input type='radio' name="spanchoice" id="twelve" checked onmouseup="populateSelect(12)"><label for="twelve"  onmouseup="populateSelect(12)">12 heures (am/pm)</label><br/>
<input type='radio' name="spanchoice" id="twentyfour" onmouseup="populateSelect(24)"><label for="twentyfour" onmouseup="populateSelect(24)">24 heures </label><br/>
</body>
</html>

y'a le size qui ne fonctionne pas (pour en faire un spinner)
vos suggestion pour le rendre plus rapide sont les bienvenues ...

**FMaz** · 27/04/2006, 21h06

J'ai peut-être mon code de Drag and Drop avec support des DropZone qui pourrait être bien (mais pas parfait).

Ca intéresserait quelqu'un ?

**siddh** · 27/04/2006, 22h08

Au lieu de demander l'avis, postez vos codes

Apres on fais le tri quand on intègre dans les pages sources de toute manière.

**javatwister** · 28/04/2006, 11h38

En réponse à SF, j'ai beaucoup plus rapide et beaucoup plus long

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<script type="text/javascript">
 
var r, cadre, s, s2, op, format;
var nbr, decal, plus, zero;
 
window.onload=function(){
r=document.getElementsByName("h");
cadre=document.getElementById("sel");
s=document.createElement("select");
s2=document.createElement("select");
cadre.appendChild(s);
cadre.appendChild(s2);
r[0].checked=true;
for (var i=0;i!=r.length;i++){
  r[i].format=r[i].value;
  r[i].onclick=init
};
format=12;
init()
}
 
function init(){ 
nbr=-1;
decal=r[0].checked ?1:0;
plus= this.format==12 ? "am" : "";
while(s.lastChild){
  s.removeChild(s.lastChild)
}; 
 
for(var j=0;j!=25+decal;j++){
  nbr++
  op=document.createElement("option");
  if(nbr==13 && this.format==12){  
   nbr=0;
   plus="pm"
  };
  zero= nbr>=10 ? "" : "0";
  op.text=zero+nbr+plus;
  op.value=zero+nbr+plus;
  s.add(op,undefined)
};
 
s.onchange=function(){
  change(this)
};
while(s2.lastChild){
  s2.removeChild(s2.lastChild)
};
for(var k=0;k!=60;k++){
  zero = k>=10 ? "" : "0";
  op=document.createElement("option");
  op.text=zero+k;
  op.value=zero+k;
  s2.add(op,undefined)
};
}
 
function change(q){
nbr=-1;
decal=r[0].checked ?1:0; 
if(q.value=="12am" || q.value=="12pm" || q.value==24){
  while(s2.lastChild){
   s2.removeChild(s2.lastChild)
  };
 
  op=document.createElement("option");
  op.text="00";
  op.value="00";
  s2.add(op,undefined)
}
else{
  for(var k=0;k != 60;k++){
   zero = k>=10 ? "" : "0";
   op=document.createElement("option");
   op.text=zero+k;
   op.value=zero+k;
   s2.add(op,undefined)
  }
}
}
 
</script>
 
</head>
<body>
 
<p>
<input type="radio" value="12" name="h" id="h1" />
<label for="h1">12 heures</label>
<input type="radio" value="24" name="h" id="h2" />
<label for="h2">24 heures</label>
</p>
 
<p id="sel" style="float:left">
</p>
 
<p style="float:left">
<input type="button" value="valider" onclick="alert(s.value.substring(0,2)+'h'+s2.value+' '+s.value.substring(2))" />
</p>
 
</body>
</html>

**SpaceFrog** · 28/04/2006, 12h03

ouaip mais pas glop la double saisie imposée ...

ce qui explique la division par 24 du temps ...

**javatwister** · 28/04/2006, 12h19

double saisie?

t'es pas sérieux là?

t'as vu la différence de vitesse!

**FMaz** · 28/04/2006, 14h30

Voici mon script de drag and drop.
J'en avais 2 versions, une adapté à mes besoin (celle-ci) et l'autre avec quelques bug non-corrigés. Je vous poste donc la moins générique mais la plus stable, vous n'aurez qu'à emputer ce qui est innutile.

Le javascript:

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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
 
// Conception de Francois Mazerolle, 2006
// Vous pouvez utiliser et/ou modifier ce script dans un contexte non-lucratif seulement.
// Si vous désirez une authorisation d'usage commerciale, veuillez me contacter à l'adresse suivante: admin@maz-concept.com
//
// Conception by Francois Mazerolle, 2006
// You can use and/or modify this script for non-lucrative purposes only.
// If you need a commercial usage authorisation, please contact me at: admin@maz-concept.com 
 
//BUG(S) À CORRIGER:
// - Si un DG contiend un tag <img> le drag va mal démarré si le onMousedown est fait sur l'image.
 
//Note: DG = L'élément déplacable (dragable), DZ= Drop Zone, zone pour lacher un DG.
 
 
//Concernant tout le script
var isdrag=false; //Si un Drag est en cours.
var dragobj; //DG qui est en train d'être dragé
var dzallowed; //DZ authorisé par le DG
var startdz; //Concerver en mémoire la DZ de départ
 
//Concernant la fonction SlideTo
var sensX=0;
var sensY=0;
var moveSteps=-1; //Combien de déplacement il y aurra entre les 2 positions. Pas une config, elle doit commencer à -1
 
//Concernant les fonctions qui servent à détecter des positions et celles qui utilisent les positions
var posx = 0; // Position actuelle du curseur
var posy = 0;
var posxobj = 0; //Position du curseur sur l'objet (soustraite cette valeur à la position du curseur pour avoir les coordonnées de l'objet)
var posyobj = 0;
var posxini = 0; //Position d'origine du DG
var posyini = 0;
var elemposx= 0; //Position d'un élément
var elemposy= 0;
 
function position(e){ // Fonction qui détecte la position du curseur sur la page
 
    if (!e) var e = window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }else if (e.clientX || e.clientY){
        posx = e.clientX + document.body.scrollLeft;
        posy = e.clientY + document.body.scrollTop;
    }
 
    if(isdrag){
        SetCurrentDGPos(posx-posxobj,posy-posyobj);
    }
}
 
function ElementPosition(obj){ // Fonction qui détecte la position d'un élément sur la page
    //Définir la position de l'élément
    elemposx=0;
    elemposy=0;
 
    if (obj.offsetParent){
        while (obj.offsetParent)
        {
            elemposx += obj.offsetLeft
            elemposy += obj.offsetTop
            obj = obj.offsetParent;
        }
    }else if (obj.x){
        elemposx += obj.x;
        elemposy += obj.y;
    }    
}
 
function FindDiv(type,name,changeclass){ //Fonction qui retourne l'objet selon son type et son nom (id, param#2)
    //Trouver le DG
    var dgIds;
    var dgId;
    var statut=false;
    void(el=document.getElementsByTagName("div"));
    for(i=0;i<el.length;i++){
        dgIds=el[i].id.split("|");
        if(dgIds[0]==type){ //Si l'objet trouvé est du type de celui que l'ont recherche
 
            dgId=dgIds[1].split(",");
            for(e=0;e<dgId.length;e++){ //Lister tout les id associé à cet item
 
                //Si ll'objet est celui recherché
                if(name==dgId[e]){
                    if(changeclass!=""){ //Changer sa classe (besoin #1)
                        el[i].className=changeclass;
                        statut=true;
                    }else{ //Retourner l'objet (Besoin #2)
                        return el[i];
                    }
                }
            }
        }
    }
    return statut;
}
 
function FindCurrentDZ(mba) { //Fonction qui recherche si nous sommes au dessus d'une DZ et qui retourne l'objet DZ si oui.
    //mba = Must Be Authorized (true ou false)
    var IsAuthorised=false;
    var dzIds;
    var dzId;
    void(el=document.getElementsByTagName("div"));
    for(var i=0;i<el.length;i++){
        if(el[i].id.substring(0,2)=="dz"){
 
            if (mba){
                //Passer toutes les DZ authorisés en mémoire
                for (var e=0;e<dzallowed.length;e++){
                    dzIds=el[i].id.split("|");
 
                    //Si la DZ est authorisée
                    dzId=dzIds[1].split(",");
                    for(j=0;j<dzId.length;j++){ //Lister tout les id associé à cet item
                        if(dzallowed[e]==dzId[j]){
                            IsAuthorised=true;
                        }
                    }
                }
            }else{ IsAuthorised=true; }
 
            if (IsAuthorised){
                //Trouver la position réelle sur la page de l'élément
                ElementPosition(el[i]);
 
                //Déterminer si le curseur est dans la DZ
                if ((elemposx < posx)
                && ((elemposx+el[i].offsetWidth) > posx)
                && (elemposy < posy)
                && ((elemposy+el[i].offsetHeight) > posy)){
                    return el[i];
                }
            }
            IsAuthorised=false;
        }
    }
    return false; //Aucune DZ trouvée
}
 
 
 
function start_drag(e){ //Détecter les début de click pour lancer la début d'un drag
 
    //Vérifier qu'aucun drag est en cours actuellement
    if(isdrag){ return false; }
 
    //Trouver la position actuelle du curseur
    position(e);
 
    //Trouver tout les DG
    var dgId;
    void(el=document.getElementsByTagName("div"));
    for(var i=0;i<el.length;i++){
        dgId=el[i].id.split("|");
        if(dgId[0]=="dg"){
 
            //Déterminer si le curseur est dans le DG
            if (el[i].offsetLeft < posx
            && (el[i].offsetLeft+el[i].offsetWidth) > posx
            && el[i].offsetTop < posy
            && (el[i].offsetTop+el[i].offsetHeight) > posy){
 
                //Encadrer les DZ acceptées par ce DG
                dzallowed=dgId[2].split(",");
                var dzId;
                for (var e=0;e<dzallowed.length;e++){
                    if(dzallowed[e]!=""){
                        dzId=FindDiv("dz",dzallowed[e],"dropable_on");
                        if(!dzId)
                            alert (dzallowed[e]+" est indéfini.");
                    }
                }
 
                //Trouver la position innitiale du DG que nous dragons (s'il est dropé n'importe ou, il reviendra à sa position innitiale)
                posxini = el[i].offsetLeft;
                posyini = el[i].offsetTop;
 
                //Démarrer un Drag (afin d'empecher 2 drag simultanés)
                isdrag = true; 
 
                //Placer le DG au dessus de tout
                el[i].style.zIndex=9999;
 
                // Mettre en mémoire l'objet que nous sommes en train de drager
                dragobj = el[i];
 
                //Trouver si nous sommes actuellement dans un DZ
                startdz = FindCurrentDZ(false);
 
                //Trouver la position du curseur dans l'objet
                if(isdefined('dragobj')) {
                    posxobj=posx-dragobj.offsetLeft;
                    posyobj=posy-dragobj.offsetTop;
                }
 
                //Mettre un curseur de déplacement
                document.body.style.cursor="move";
 
                //Surveiller les mouvement de souri ainsi que le relachement du bouton de souris.
                if (document.attachEvent) { //IE
                    document.attachEvent ('onmousemove', position);
                    document.attachEvent ('onmouseup', stop_drag);
                }else{ //FF
                    document.addEventListener('mousemove', position, false);
                    document.addEventListener('mouseup', stop_drag, false);
                }
 
                //Quitter la fonction afin de ne pas démarrer 2 drag en même temps.
                return false;
 
            }
        }
    }
}
 
function stop_drag(e){ //Fonction qui arrête le Drag.
    var dzId;
    var dz;
 
    //Vérifier qu'un drag est en cours actuellement (Sinon on est supposé arrêter quoi ? Bug de IE qui detach pas assez rapidement l'objet)
    if(!isdrag){ return false; }
 
    if (document.attachEvent) { //IE
        detachEvent ('onmousemove', position);
    }else{
        document.removeEventListener('mousemove', position, false);
    }
 
 
    //Trouver si nous sommes actuellement sur une DZ
    dz = FindCurrentDZ(true);
    if(dz){ // Si une DZ authorisée est trouvée
        dzId=dz.id.split("|");
 
        //Trouver la position réelle sur la page de l'élément
        ElementPosition(dz);
 
        //Changer la position d'origine de l'élément à dragger pour la position de la DZ authorisée**
        posxini = elemposx+(dz.offsetWidth/2-dragobj.offsetWidth/2);
        posyini = elemposy+(dz.offsetHeight/2-dragobj.offsetHeight/2);
 
        //Un changement à été fait, vérifier si la DZ comporte une action et que la DZ n'est pas celle de départ.
        if (dzId.length>2 && startdz!=dz) {
            eval(dzId[2]); // Exécuter l'action de la DZ.
        }
    }
 
 
    //Passer toutes les DZ authorisés en mémoire
    for (var e=0;e<dzallowed.length;e++){
        dzId=FindDiv("dz",dzallowed[e],"dropable_off");
    }
 
    //Replacer l'item à son emplacement initial ou dans son DZ**^^ si c'est nécésaire
    slideTo(posxini,posyini,10);
 
    //Placer le DG à son élévation normale
    dragobj.style.zIndex=1;
 
    //Mettre un curseur normal
    document.body.style.cursor="default";
}
 
 
//Fonctions de déplacement
function slideTo(tx, ty, interval) { //Fonction qui "Glisse" un objet vers une position
 
    if(moveSteps==-1){
        moveSteps=20; //Nombre de déplacement à effectuer (Plus le nombre est grand plus le déplacement est lent)
    }
 
    // Calculer le "pas" de chaque déplacement
    sensX=Math.round((dragobj.offsetLeft-tx)/moveSteps)
    sensY=Math.round((dragobj.offsetTop-ty)/moveSteps)
 
    if(moveSteps>0){
        dragobj.style.left=dragobj.offsetLeft-sensX+"px";
        dragobj.style.top=dragobj.offsetTop-sensY+"px";
    }
    moveSteps-=1;
 
    //Si le déplacement est terminé, placer précisément l'objet et stoper le timer, sinon, continuer le déplacement
    if(moveSteps==0){
        if(isdefined('timerID')) {
            clearTimeout(timerID);
        }
        SetCurrentDGPos(posxini,posyini);
        moveSteps=-1;
 
        // Le drag est terminé (Note, si jamais le drag ne se terminait jamais, il sera impossible de commencer un autre drag)
        isdrag = false; 
    }else{
        timerID = setTimeout("slideTo("+tx+", "+ty+", "+interval+")", interval);
    }
}
 
function SetDGintoDZ(dg,dz,smooth){ //Fonction qui place le DG dans un DZ simplement en passant leurs noms.
 
 
    dragobj=FindDiv("dg",dg,"");
 
    //Si le DG est introuvable, innutile de chercher le DZ
    if(!isdefined('dragobj')) { return false; }
 
 
    //Trouver la position du DZ
    dropobj=FindDiv("dz",dz,"");
    ElementPosition(dropobj);
    posxini = elemposx+(dropobj.offsetWidth/2-dragobj.offsetWidth/2);
    posyini = elemposy+(dropobj.offsetHeight/2-dragobj.offsetHeight/2);
 
 
    //Effectuer le placement
    if(smooth){
        slideTo(posxini,posyini,5)
    }else{
        SetCurrentDGPos(posxini,posyini);
    }
}
 
function SetCurrentDGPos(x,y){ // Fonction qui place le DG actuel (dragobj) à une position précise.
    dragobj.style.left = x+"px";
    dragobj.style.top  = y+"px";
    return false;
}
 
 
 
 
 
 
//Mini-fonction d'une ligne
function IfDrag_retFalse(e){ if(isdrag) return false; } //Retourne false si un drag est en cours
function isdefined(variable){ return (typeof(window[variable]) == "undefined")?  false: true; } //Fonction qui détermine si une variable est définie
 
 
 
 
//Surveiller les évènements qui lance le drag
if (document.attachEvent) { //IE
    document.attachEvent ('onmousedown', start_drag);
}else{
    document.addEventListener("mousedown",start_drag,true);
 
}
//Afin d'éviter que le drag sélectionne du texte en arrière plan lors de déplacements
document.onselectstart=IfDrag_retFalse;
document.onmousedown=IfDrag_retFalse;
 
 
// ### FIN DU SCRIPT

Exemple d'utilisation:

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
 
 <!-- DZ: Les Drop Zones -->
  <!-- id="dz|<id>|<action lorsque dropé>"-->
 <div id="dz|zone_a|test('hell');" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
  Drop-Zone 02
 </div>
  <div id="dz|zone_b" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
 Drop-Zone 02
 </div>
  <div id="dz|zone_c" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
 Drop-Zone 03
 </div>
 
 
 <!-- DG: Les éléments DraGables -->
 <!-- id="dg|<id>|<DZ autorisés>"-->
<div id="dg|item812|zone_a,zone_c" class="dragable" style="position:absolute;background-color:red;width:90px;height:90px;">
	Drag me !
	<table align="center" style="border:1px solid black;">
		<tr><td>Tableau</td></tr>
		<tr><td align="center"><div style="background-image:url('img.gif');width:30px;height:30px;"></div></td></tr>
	</table>
</div>

Voilà, si vous utilisez cette source, laissez-moi un petit mot

**Auteur** · 02/05/2006, 19h34

juste deux petites questions (Javatwister et Spacefrog) sur le script des formats d'heures :

Code :

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

1
2
3
4
5
 
op=document.createElement("option");
  op.text="00";
  op.value="00";
  s2.add(op,undefined)

1- Est-ce que la méthode createElement() est nécessaire dans la mesure où la méthode add est appelée ? En d'autres termes est-ce que add (qui ajoute l'option au select) ne créé pas en même temps l'élément dans la page ?

2-peut-on remplacer ce code (et supprimer createElement()) par :

Code :

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

1
2
3
4
5
 
op=new Option();
  op.text="00";
  op.value="00";
  s2.add(op,undefined)

[Ancien]Page Code Source

Contribuez

Discussions similaires

Partager

Partager