Elementi draggabili e Z-Index

[Razorblade]

Ciao a tutti,
sto cercando di creare qualcosa che assomigli anche un po' alla lontana al sito http://www.netvibes.com/. Potete vedere un esempio di cosa ho fatto fino ad ora qui:

http://www.gameheaven.it/dragdrop/

Il mio problema è:
quando entro in modalità drag vorrei che l'elemento che sto "draggando" rimanga al di sopra di tutti gli altri, quindi ho fatto in modo che il suo "z-index" sia maggiore di tutti gli altri elementi.
Però quello che accade è che il primo elemento creato sta sempre al di sotto del secondo, il secondo a sua volta sotto del terzo e cosi' via.

Tranne che in un caso, ovvero alla prima azione di drag, ovvero se si dragga l'elemento id "drag_0" questo sarà visibile al di sopra di "drag_3", quindi draggando "drag_3" questo si vedrà al di sopra di "drag_0". Draggando dinuovo "drag_0" questo starà al di sotto e lo script prenderà il comportamento che ho descritto sopra.

I nomi degli elementi, i loro valori di zindex e le coordinate potete vederli nella parte in alto della pagina.

Chi mi aiuta?
Grazie

[Razorblade]

[Razorblade]

ancora un UP

[Xinod]

z-index quando trattata via javascript diventa zIndex
cosi' come font-size diventa fontSize
-moz-opacity MozOpacity ...
cade il trattino e la prima lettera dopo il trattino diventa maiuscola
ciao

[Razorblade]

Grazie 1000,
grazie al tuo intervento ho risolto.
Non immaginavo proprio che la maiuscola fosse un tale problema in quanto nella console degli errori non è segnalata per nulla... magari il motore javascript ha preso il mio zindex per un nuovo attributo di style ( che nn serve a nulla ).

E' sorto un altro problema.
Ho impostato che all'evento onmousedown il <LI> che contiene il <DIV> draggabile mostri un bordo, che poi scompare all'evento onmouseup. La comparsa del bordo fa però in modo che alcuni elementi "scivolino" via. E possibile risolvere questa situazione mantanendo il listato?

Grazie
Ciao

[Xinod]

scivolano via perche' quando hanno un bordo occupano piu' spazio?
prova a fare in modo che lo spessore del bordo non vada ad aggiungersi alla dimensione, quindi quella che per es. era w deve diventare w-spessore bordo

[Razorblade]

Ho applicato la modifica da te consigliata, però gli elementi continuano a scivolare se sono mossi in certi punti. Perchè i <LI> continuano ad influire sui <DIV>? Devo settare un "position" specifico?

[Xinod]

perche' lo spessore dei bordi e' in punti? tu ad occhio togli 3 px ma questo rapporto e' arbitrario

poi, setti nuovamente le misure come erano al mouseup?
io noto una bella discrepanza se clicco su quello arancione (2) senza draggare, clicco su 1 e poi nuovamente su 2

poi prova a cliccare su 4, si trovera' effettivamente piu' in alto di quanto ti aspetti
(non farti influenzare dallo z-index, perche' copri ma e' fuori posto)
questo lo fa scivolare

[Xinod]

proprio adesso ho verificato con ff:
se al mousedown setti 1px di bordo e ridimensioni a 298*298
e al mouseup setti a 0px il bordo e ridimensioni a 300*300 il rosso non scivola
ciao

[Razorblade]

Verissimo ora funziona perfettamente,
ti ringrazio.
Avresti per caso un consiglio su come realizzare il passo successivo?
In pratica se l'oggetto draggato viene spostato più del 50 % delle sue dimensione al di fuori del <LI> che lo contiene, si forma un altro <LI> vuoto con il bordo delle stesse dimensione dell'oggetto draggato, ed in caso di onmouseup il <DIV> draggato prende quella posizione.

La cosa è resa ancora meno semplice in quanto per l'utente dovrebbe essere possibile spostare il giallo (2) al di sotto del rosso (3), questo implicherebbe la creazione di 3 nuovi <LI>

Inoltre si dovrebbe avere la possibilità di inserire quest'oggetto draggato tra altri oggetti, per esempio il (2) arancione tra lo (0) blu e il (3) rosso

Grazie ancora per tutta l'assistenza che mi hai offerto fino ad ora.
Ciao