<html> <head> <style> .uno{ position:relative; left:100px; top:50px; width:200px; height:100px; background:#AAFFCC; border:10px solid green; } </style> <script type="text/javascript"> function Nr(stile){ var numero=Number(stile.replace("px","")); return numero; } var oggetto, offsetX, offsetY, startX, startY; function inizia(){ document.onmousedown=MouseDown; document.onmouseup=MouseUp; } function MouseDown(e){ oggetto=e.target; var stile=document.defaultView.getComputedStyle(oggetto,""); offsetX=Nr(stile.left); offsetY=Nr(stile.top); startX=e.clientX; startY=e.clientY; document.onmousemove=MouseMove; return false; } function MouseMove(e){ oggetto.style.left=offsetX+e.clientX-startX; oggetto.style.top=offsetY+e.clientY-startY; } function MouseUp(){ document.onmousemove=null; oggetto=null; } </script> </head> <body onLoad="inizia()"> <div id="uno" class="uno"> </div> </body> </html>L'aggiunta della riga in rosso e dei valori su fondo giallo risolve il problema.
Come e perchè, ancora non lo capisco con precisione...
Nessun commento:
Posta un commento