Spostare

Generalmente non ci sono problemi di incompatibilità quando venga assegnata una nuova dislocazione ad un elemento CSS-P.

Per far muovere un elemento chiamato "myelement" alla coordinata (100,50), dovrete semplicemente assegnargli nuovi valori left e top:

myelement.left = 100
myelement.top = 50

Ma non dimenticate che myelement deve essere una pointer variable definita come segue:

function init() {
        if (ns4) myelement = document.myelementDiv
        if (ie4) myelement = myelementDiv.style
}

D'ora in poi, questa funzione varrà per tutti gli esempi, non dimenticatela!

Come ho già detto non ci sono problemi di incompatibilità nell'assegnare una nuova dislocazione, comunque c'è un problema quando si va a verificare la allocazione corrente dell'elemento. Questo è dovuto al fatto che IE memorizza la sua dislocazione con un "px" che segue il valore (come visto nell'esempio del  Cross-Browser JavaScript).

Per liberarsi del "px" potete trasformare in un intero il valore.

Così anziché scrivere solamente

myelement.left

Dovrete scrivere

parseInt(myelement.left)
Per esempio, se volete che venga mostrata una finestra di avvertimento sui valori left e top correnti dovreste scrivere:
alert(parseInt(myelement.left) + ", " + parseInt(myelement.top))

Aggiungere Nuove Proprietà

Ora credetemi, dover sempre scrivere parseInt() prima di tutte le vostre variabili è abbastanza noioso. Vi chiederete presto se ci sia un modo migliore ... e penso di avere una buona notizia per voi.

Non c'è niente che vi trattenga dall'aggiungere più attributi alla vostra pointer variable, o oggetto, come io cercherò di chiamarlo da ora in poi.

La cosa che suggerisco di fare è di conservare la dislocazione corrente dell'elemento in proprietà separate da quelle di left e top. Per conservarle dovete solo assegnarle direttamente. Incomincerei col porle nell'attuale posizione:

myelement.xpos = parseInt(myelement.left)
myelement.ypos = parseInt(myelement.top)

A questo punto, se aveste mai bisogno di trovare la posizione left o quella top, dovrete solo verificare il valore rispettivamente di myelement.xpos e myelement.ypos. La nostra nuova finestra di avviso sarà così:

alert(myelement.xpos + "," + myelement.ypos)

E Lo Spostamento?

Quando volete cambiare la dislocazione dell'elemento dovete IN PRIMO LUOGO cambiare i valori di xpos e ypos. POI porre i valori left e top rispettivamente uguali a xpos e ypos. Per esempio:

function move() {
        myelement.xpos = 200
        myelement.ypos = -40
        myelement.left = myelement.xpos
        myelement.top = myelement.ypos
}

Dovrete sempre tenere i valori xpos e ypos sincronizzati con i valori left e top. In questo modo quando andrete a controllare myelement.xpos, saprete per certo che saranno sempre uguali a myelement.left.

Cliccate qui per vedere un esempio che utilizza questa tecnica.

Non è troppo difficile, vero? Questa idea è fondamentale per tutto. Mostrerò degli esempi più avanti. Potrebbe sembrare un po' eccessivo avere queste variabili in aggiunta, ma una volta che vi sarete addentrati in questioni più complicate capirete che questa tecnica vi aiuta a snellire il vostro codice.
 
 

Nota: 
Vi chiederete perché uso xpos e ypos come proprietà invece che solo x e y... Beh,  l'ho fatto per una ragione. E' poco conosciuto che Netscape ha già incluso queste proprietà nel CSS-P. Ho scoperto che se si usano x e y allora i valori saranno memorizzati come interi. Ora potreste pensare "chi se ne importa?"... si dà il caso che ci siano esempi per i quali si impone la memorizzazione delle posizioni left e top correnti in modo più preciso che non solamente utilizzando gli interi (ad esempio i numeri reali coi decimali e quantaltro) e questo non sarebbe possibile con l'uso di  x e y

Le Funzioni di Spostamento Generali

Nell'ultimo esempio ho codificato gli spostamenti - ho scritto funzioni separate per ogni movimento. Ora naturalmente se voi volete spostare molti layer potreste non aver molta voglia di scrivere. Così noi possiamo creare alcune funzioni generali che siano correlate al maggior numero possibile di movimenti.

La Funzione moveTo() Function

La funzione moveTo() porta il vostro layer/oggetto a spostarsi direttamente nella nuova collocazione.

function moveTo(obj,x,y) {
        obj.xpos = x
        obj.left = obj.xpos
        obj.ypos = y
        obj.top = obj.ypos
}

Usare la funzione è davvero facile - dovete solo dichiarare quale layer/oggetto usare e le nuove coordinate (x e y). Per esempio, se inizializzate il vostro layer con:

if (ns4) mysquare = document.mysquareDiv
if (ie4) mysquare = mysquareDiv.style
mysquare.xpos = parseInt(mysquare.left)
mysquare.ypos = parseInt(mysquare.top)

Allora per muovere il quadrato nella nuova posizione scriverete:

moveTo(mysquare,50,100)
La Funzione moveBy()

MoveBy si comporta esattamente allo stesso modo, ma invece di spostare l'oggetto nel nuovo punto, fa spostare il layer di un dato numero di pixel.

function moveBy(obj,x,y) {
        obj.xpos += x
        obj.left = obj.xpos
        obj.ypos += y
        obj.top = obj.ypos
}

per spostare mysquare di 5 pixel a destra, e 10 pixel verso l'alto, scriverete:

moveBy(mysquare,5,-10)
Cliccate qui  per vedere un esempio

Home Prossima Lezione: Far Muovere
copyright 1998 Dan Steinman