oggetti dragable

[gasparirob]

In questo post non chiedo una soluzione... chiedo una spiegazione.

Il codice qui sotto (prelevato da www.dynamicdrive.com, per completezza) è uno script per rendere dragable (ovvero spostabili) gli elementi di classe "drag"

ecco il codice:

<style type="text/css">

.drag{
position:relative;
cursor:hand;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Drag and Drop Script: © Dynamic Drive ([url]http://www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit [url]http://www.dynamicdrive.com/[/url] for this script and 100s more.
***********************************************/

var dragobject = {
    z: 0,
    x: 0,
    y: 0,
    offsetx : null,
    offsety : null,
    targetobj : null,
    dragapproved : 0,

    initialize:function(){
        document.onmousedown=this.drag
        document.onmouseup=function(){
            this.dragapproved=0
        }
    },

    drag:function(e){
        var evtobj=window.event? window.event : e
        this.targetobj=window.event? event.srcElement : e.target

        if (this.targetobj.className=="drag"){
            this.dragapproved=1
            if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
            if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
            this.offsetx=parseInt(this.targetobj.style.left)
            this.offsety=parseInt(this.targetobj.style.top)
            this.x=evtobj.clientX
            this.y=evtobj.clientY
            if (evtobj.preventDefault)
                evtobj.preventDefault()
            document.onmousemove=dragobject.moveit
        }
    },

    moveit:function(e){
    var evtobj=window.event? window.event : e
    if (this.dragapproved==1){
        this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
        this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
        return false
    }
    }
}

dragobject.initialize()

</script>

nell' HTML è sufficiente un'istruzione del tipo [img]pincopalla.gif[/img] 

cosa fa il codice si sa (possiamo spostare l'immagine pincopalla.gif dove vogliamo sullo schermo)... la mia domanda è COME lo fa.
Viene creato un oggetto 'dragobject' (e gia qui il primo dubbio: 1 solo?? o 1 per ogni tag di classe "drag"?). Questo dragobject è composto da vari attributi e 3 metodi: initialize, drag e moveit. Viene eseguito il metodo initialize()... e qui mi perdo (ovviamente perche di oggetti ne so ben poco... anche se sto cercando piano piano di colmare questa GROSSA lacuna...).
Agli eventi onmouseup e onmousedown del document ( :master: ) vengono assegnati due funzioni (o metodi); rispettivamente il drag e una funzione che assegna a 'dragapproved' il valore 0. In entrambi i casi si prende il valore da 'this'... che si riferisce a cosa? a dragobject? da qui in poi il buio... non che fino a qui sia proprio chiaro...

che dire... se avete qualche minuto da perdere...anzi, diversi minuti...
vi ringrazio cmq a priori...

[gasparirob]

ok, forse mi sto avvicinando piano piano...

creo questo oggetto dragobject
associo il metodo drag all'evento onmousedown e la funzione che effettua un 'this.dragapproved=0' a onmouseup (entrambi del document)

in questo modo ogni volta che effettuo un click su qualsiasi punto dello schermo partirà il metodo drag (che poi pensera a vedere se l'oggetto target è un class drag o no... se si lo sposta se no non fa niente)

le prime due righe del motodo drag non le ho capite. Perche fare un controllo sul window.event? e sopratutto: chi è quella 'e'??? e chi gliela passa???
boh... cmq ho sostituito le prime due righe con queste due:

var evtobj=window.event
this.targetobj=event.srcElement 

(funziona lo stesso... a sto punto mi chiedo se a culo o se sia effettivamente giusto)

a questo punto controlliamo se il target è di class="drag"... e se si facciamo questo:
inizializziamo, eventualmente, left e top
vengono assegnati i valori di left e top dell'oggetto cliccato a offsetx e offsety
ad x e y assegnamo la posizione del mouse
a questo punto effettuiamo un controllo sulla cancellabilita dell'evento (tramite preventDefault). Sta cosa non l'ho capita un granchè, cmq se elimino queste due righe, il programma funge lo stesso...
invochiamo il metodo moveit, che in pratica assegna a left e top le nuove posizioni ricavate dagli offset e dagli x/y (sta parte la devo analizzare meglio... cmq il succo è quello)
alla fine c'è un return false (perche??? :master: )

ricapitoliamo i miei dubbi:
prime due righe del metodo drag: il controllo su window.event
preventDefault
gestione di x e y tra mouse, client e oggetto stesso
il return false

ma almeno il concetto sopradetto è giusto???