drag avec javascript et css
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:
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> |
