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...