Getting X,Y cords into form element.

[Kudose]

Hello all. I am trying to modify a script from Dynamic Drive. It allows an image to be dragged around.

What I am looking to do is get the script to update a hidden field that corresponds to the image being moved with it's X,Y coordinates.

Here is the script from DD ... all I do is make the class "drag" and it works just fine.

<style type="text/css">        

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

        </style>        

        <script type="text/javascript">        

        /***********************************************
        * Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
        * This notice MUST stay intact for legal use
        * Visit http://www.dynamicdrive.com/ 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>   

Here is what I am using to ID each item.

<img width="100" height="80" src="'.ROOT_URL.'/listings/thumb_'.$listingImages[$use].'" border="0" style="border:1px solid #000;" class="drag" id="image_'.$i.'">

Where $i = X in the loops iteration.

echo '<input type="hidden" name="images[]" id="input_'.$key.'" value="'.$image.'" />'."\n";

Where $key == $i.

Any help would be appreciated. I am kinda out of ideas.

TIA.