Déplacer un calque via la souris
Bonjour à tous,
je souhaiterais qu'un calque puisse être déplacé lorsqu'on maintiens la souris enfoncée dessus.
Pour cela, j'ai fait quelques fonctions que je vais vous montrer.
Dans la balise head :
Code:
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
| <script language="JavaScript">
// Détection du navigateur
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// La variable qui servira à manipuler les calques
var skn;
var g;
var h;
// Fonction lançant le déplacement des calques
function selec(calque)
{
// Renseignement de la variable de manipulation des calques
skn = eval(calque + '.style');
// On fait passer le calque sélectionné au dessus des autres (Z-index supérieur)
skn.zIndex += 1;
// Lancement de la détection des mouvements de la souris
//document.onmousemove = suivre_souris;
}
// Fonction utilisant le déplacement de la souris pour déplacer le calque sélectionné
function suivre_souris(e)
{
// On récupère l'emplacement de la souris
var x = event.x + document.body.scrollLeft - (document.body.scrollWidth * 0.02) -178;
var y = event.y + document.body.scrollTop -132;
//
//
// On attribue les coordonnées du pointeur au calque
skn.left = x;
skn.top = y;
//skn.left += x;
//skn.top += y;
}
// Fonction de pose du calque sélectionné et d'analyse de la position
function lache(calque)
{
suivre_souris;
// On le place à la bonne position
//skn.left = x;
//skn.top = 0;
// Et on le récale à son niveau initial (pour qu'il ne recouvre plus les autres calques)
skn.zIndex -= 1;
}
// Fonction arrétant tout
function rien()
{
void(0);
skn.zIndex = 3;
}
</script> |
Et dans body :
Code:
1
2
3
4
5
6
7
8
9
10
| <div id="test" name="test" >
<table class="winstyle" border="0" cellspacing="0" >
<tr onmousedown="javascript:selec('test');" onkeypress="javascript:suivre_souris;" onmouseup="javascript:lache('test'); javascript:rien();" >
<th class="win" ><img src="img/icone.gif" alt="" align="left" /><img src="img/fermer.gif" width="21" height="21" alt="" align="right" /></th>
</tr>
<tr>
<td class="winfen" ></td>
</tr>
</table>
</div> |
Le but est qu'en enfonçant le bouton de la souris, de selectionner le calque, quand on bouge la souris (onmousemove, et c ca qui semble poser pb), le calque en suit les mouvements, et quand on lache la souris, on pose le calque à cet endroit.
Pouvez vous m'aider a savoir ce qui ne fonctionne pas la dedans ?
Meric beaucoup
