Keskustelu: Nettisivujen teko: z-indeksoitujen layereiden liikuttelu hiirellä?

Onko kellään hajua, miten tollasen sais toteutettua näppärästi? Ilmeisesti javascriptillä joutuis tekee, mutta voiko joku jeesata vähän alkuun? Tiedän, että popup-ikkunat ajais saman asian, mutta eikö ne oo vähän niinkuin jo poissa muodista? ;p

Helpoin tapa noin toimivuuden kannalta olisi vaihdella elementtien järjestystä. Sivulla myöhemmin olevat elementit tulevat päälle kun aiemmat elementit jäävät alapuolelle. Lisäksi position : absolute; ja position : fixed; -elementit sijoitetaan päällemmäksi kuin static- ja relative-elementit.

CSS:n z-index -arvo on selaintuen takia hieman ongelmallinen, yllättävän helpostikin saa tilanteen jossa se ei vain toimi kaikilla selaimilla oletetulla tavalla tai sillä ei ole jopa ollenkaan vaikutusta.

Aika yksinkertainen juttuhan tuo on itsekin toteuttaa, mutta suosittelisin silti jotain valmista pikku kilkettä, kuten Scriptaculouksen Draggable-luokkaa.

Okei, löytyi yksinkertaisempikin skripti, mutta jostain syystä event.clientX ei toimi Firefoxissa. IE:llä pelittää mainiosti.

Tarkoittamani esimerkki löytyy täältä: http://msconline.maconstate.edu/tutorials/JSDHTML/JSDHTML15/jsdhtml15-03.htm

Prototypen lähdekoodista:

  pointerX: function(event) {
    return event.pageX || (event.clientX +
      (document.documentElement.scrollLeft || document.body.scrollLeft));
  },

  pointerY: function(event) {
    return event.pageY || (event.clientY +
      (document.documentElement.scrollTop || document.body.scrollTop));
  }

Mutta kaikkein yksinkertaisinta on siis käyttää vaikkapa tuota Draggable-luokkaa.