Originariamente inviato da clingonboy
Buona sera, stò cercando di imparare javascript e devo dire che mi stà piacendo molto.
Nelle varie prove per imparare ho incontrato un problema che non riesco a risolvere anche se ho cercato a lungo su internet. .... veniamo al dunque ...
Nel codice che segue ha alcuni div che attraverso delle funzioni che ho copiato da un tutorial le rendo trascinabili sulla pagina, e fin qui tutto ok. Io voglio andare a leggere il valore della proprietà 'style.left' e poi mostrarlo con un alert che lancio con un botton.
La mia domanda è questa: perchè dopo il caricamento della pagina se provo a visualizzare il valore non viene mostrato come se non fosse definito mentre se provo dopo che ho spostato nella pagine il div trascinabile il valore viene visualizzato?
Ho ipotizzato che sia perchè all'inizio l'elemento div si posiziona nella pagina in conseguenza a come il brawser interpreta il codice html, mentre poi quando lo sposto il valore è definito dalla funzione javascript e quindi è dichiarato e leggibile. Ma ci sarà pur un modo per leggere il valore iniziale, di dove l'elemento è posizionato?
posto il codice:
codice:
<html>
<head>
<style type="text/css"> .dragme{position:relative;cursor: pointer; cursor:hand
}</style>
<script type="text/javascript">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e){
if (isdrag){
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e){
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme"){
fobj = nn6 ? fobj.parentNode : fobj.parentElement; }
if (fobj.className=="dragme"){
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
function mostraPosizione(){
var datiDx = document.getElementById('sx');
alert(datiDx.style.left);
}
</script>
<body>
<div class="dragme"> <h1> Testo 1 </h1> </div>
<div id="sx" class="dragme" style="width:200px;position:relative;display:inline;border:1px solid red;" >
lkjklò jlkj
</div>
<div id="dx" class="dragme" style="width:200px;position:relative;display:inline;border:1px solid green;">
lkjklò jlkj
</div>
Pulsante </p>
<button type="button" onclick="mostraPosizione()">Mostra Posizione</button>
</body>
</html>
l'elemento in questio è il div col bordo rosso id='sx'
spero di essere stato chiaro e di non annoiarvi troppo con domande stupide.
Grazie in anticipo per la pazienza
Rispondi quotando
