drag avec javascript et css

**gael** · 11/01/2008, 19h21

Bonjour ,

je voudrais pouvoir d�placer des objets (ici des boutons) dans leur cadre par drag.

Ca marche dans le cadre document mais ca ne marche pas si je les encapsule dans un div ou un table. Pourriez-vous m'indiquer d'o� vient le probl�me?

voici le code (qui ne "fonctionne" que 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
 
<head>
<script type"javascript">
 
	draged= null;
	positionX;
	positionY;
 
	function activerDrag(id){
		draged= id;
		positionX= event.x;
		positionY= event.y;
	}
 
	function desactiverDrag(){
		draged= null;
	}
 
	function deplacer(){
 
		if(draged){
			//alert(draged);
			document.getElementById(draged).style.top= parseInt(event.y ,10)-parseInt(positionY,10) + parseInt(document.getElementById(draged).style.top,10);	
			document.getElementById(draged).style.left= parseInt(event.x ,10)-parseInt(positionX,10) + parseInt(document.getElementById(draged).style.left,10);
			positionX= event.x;
			positionY= event.y;
		}
	}
 
</script>
</head>
<body onMouseMove="deplacer()">
 
<div id="div1" style="border:3 solid;position:absolute;top:10;left:200;width:200;height:300;" >	
<input id="bouton1" type="button" style="position:inherit;top:10;left:200;" onMouseDown="activerDrag(this.id);" onMouseUp="desactiverDrag();"/>
</div>
	<table id="table1" style="position:absolute;top:10;left:100;width:200;height:300;"  border=1 onMouseDown="activerDrag(this.id);" onMouseUp="desactiverDrag();"/> 
	<tr><td>
	<input id="bouton2" type="button" style="position:;top:10;left:100;"  onMouseDown="activerDrag(this.id);" onMouseUp="desactiverDrag();"/>
	</td></tr>
	</table>
</body>

**gael** · 12/01/2008, 03h32

c'est bon, �a marche! voici, pour info le code correct:

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
<head>
<script type"javascript">
 
	draged= null;
	positionX;
	positionY;
 
 
 
	function activerDrag(id){
/*le problème venait de là: quand je cliquais sur le bouton, je cliquais également sur son conteneur... et le dernier message pris était celui envoyé par le conteneur. Desormais, on ne peut plus draguer un composant si on en drague déjà un... la fidelité est un vaste concept!*/
		if(!draged){
			draged= id;
			evt= window.event;
			positionX= evt.clientX;
			positionY= evt.clientY;
		}
	}
 
	function desactiverDrag(){
		draged= null;
	}
 
	function deplacer(){
		if(draged){
			document.getElementById(draged).style.top= parseInt(window.event.clientY ,10)-parseInt(positionY,10) + parseInt(document.getElementById(draged).style.top,10);	
			document.getElementById(draged).style.left= parseInt(window.event.clientX ,10)-parseInt(positionX,10) + parseInt(document.getElementById(draged).style.left,10);
			positionX= window.event.clientX;
			positionY= window.event.clientY;
		}
	}
 
</script>
</head>
<body onMouseMove="deplacer()">
 
<div id="div1" style="border:3 solid;position:absolute;top:10;left:20;width:150;height:100;" onMouseDown="activerDrag(this.id);" onMouseUp="desactiverDrag();">	
	<input id="bouton1" type="button" style="position:absolute;top:10;left:40;" onMouseDown="activerDrag(this.id);" onMouseUp="desactiverDrag();"/>
</div>
 
<table id="table1" style="position:absolute;top:10;left:200;width:200;height:300;z-index:1;"  border=1 onMouseDown="activerDrag(this.id);" onMouseUp="desactiverDrag();"/> 
	<tr><td>
	<input id="bouton2" type="button" style="position:absolute;top:10;left:100;z-index:2;"  border=1 onMouseDown="activerDrag(this.id);" onMouseUp="desactiverDrag();" />
	</td></tr>
</table>
</body>

drag avec javascript et css

JavaScript

Discussions similaires

Partager

Partager