Ormai credo di padroneggiare abbastanza la tecnica, dato che l'ho riscritto da solo su un altro computer in cui non avevo le mie librerie.
Però mi sono scontrato con un problema relativo ai fogli di stile, perchè le coordinate di un oggetto presenti su un foglio di stile non vengono lette da JavaScript...
Provo a riscrivere di sana pianta il codice per rendere "dragabile" un DIV.
<html>
<head>
<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;
offsetX=Nr(oggetto.style.left);
offsetY=Nr(oggetto.style.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" style= "
position:relative;
left:100px;
top:50px;
width:200px;
height:100px;
background:#AAFFCC;
border:10px solid green;
">
</div>
</body>
</html>
...senza troppe difficoltà, salvo un paio di errori di distrazione per aver scritto un "offsetX" al posto di un "offsetY", e per aver trascurato il parametro e in MouseMove...
Bene: questo codice funziona egregiamente nel portare a spasso il DIV per tutta la finestra del browser.
Ora lo scrivo con un foglio di stile interno...
<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;
offsetX=Nr(oggetto.style.left);
offsetY=Nr(oggetto.style.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>
E vediamo cosa succede...Ecco: quando faccio il MouseDown tutto bene... Quando poi inizio il MouseMove il mio DIV mi scatta all'indietro e in alto, andandosi a rifugiare nell'angolo superiore sinistro della finestra.
Perchè?
Con una tecnica molto rudimentale ma efficace, pongo un comando "spia" nel mio codice:
function MouseDown(e){
oggetto=e.target;
offsetX=Nr(oggetto.style.left);
offsetY=Nr(oggetto.style.top);
startX=e.clientX;
startY=e.clientY;
document.onmousemove=MouseMove;
alert(offsetX+" "+offsetY);
return false;
}
Questo mi dà il valore delle due variabili in cui va immagazzinata la posizione iniziale del DIV quando si fa il MouseDown su di esso: esso mi risulta, da questa prova pari a 0 e 0. Quindi, non appena faccio il MouseMove, la nuova posizione del DIV mi viene calcolata non a partire dalla posizione iniziale del DIV, ma da zero! Se ad esempio la posizione X iniziale del DIV è 100, e il mouse si muove di 10, la posizione calcolata nell'ambito del MouseMove dovrebbe essere 100+10=110 perchè in offsetX è stata memorizzata la posizione iniziale del DIV che era 100; se invece in offsetX la posizione iniziale memorizzata è zero, all'atto del MouseMove il calcolo non viene fatto con 100 ma con 0, e quindi il DIV si sposta a una posizione sull'asse delle X di 0+10=10, e non 110!
Sono arrivato alla conclusione che se la posizione del DIV è specificata in un foglio di stile, il codice javaScript non la legge, ponendo quindi nuovi problemi...
A maggior ragione ciò accade con fogli di stile esterni...
Nessun commento:
Posta un commento