Discussion :

[WalidNat]

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 :

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
<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 :

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

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

[SpaceFrog]

en gros tu cherches à réinventer le drag and drop ...
fais une recherche sur google avec drad drop javascript ...

[javatwister]

fais une recherche sur google avec drad drop javascript ...

...ou sur ce forum; régulièrement des expériences occultes sont menées pour arriver à un système portable;
attention, tu auras forcément à tester divers événements en fonction du navigateur;

[SpaceFrog]

heu plutot drag drop