drag avec javascript et css

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

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, 04h32

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