Create movable objects with DOM, Help!

[erickkz]

Hi everyone!

I'm quite new to DOM scripting, what I need is when I click on a image I make a movable copy of it and I can move the image everywhere Mouse Goes and put it in a specific area.

My HTML code

<img src="ball1.gif" id="ball1" onClick="setobj(this.id)">//some of my diffrent options
<img src="ball2.gif" id="ball2" onClick="setobj(this.id)">//some of my diffrent options

<div id="floatimg" style="position:absolute; display:none; left:0px; top:0px;">
<img id="test">
</div>

<table>
<tr>
<td width="642" onClick="freevent()">
<div id="principalarea" style="position:relative; overflow:yes; left:0px; top:0px; width:666px; height:500px; border:1px #FFFFFF;"></div>//this is where i put my images
</td>
</tr>
</table>

My variables

var gcountobjetos=0;//this will change the id of each new image
var flagsetobjetos=0;//this will save id value of my selected image

var xMousePos = 0;//this will save the x mouse position
var yMousePos = 0;//this will save the y mouse position

var display=document.getElementById('principalarea');//this is my work area


My function setobj

function setobj(objeto){//objeto es un id
if(document.all){
flagsetobjetos=document.getElementById(objeto).src;//this will save the path of my chosen image
document.onmousemove=captureMousePosition;
}
}


my function captureMousePosition

function captureMousePosition(q){
var myflotatingobject=document.getElementById('floatimg');//this is my layer
var testid=document.getElementById('test');//this is the image id

xMousePos = event.clientX;//getting x mouse position
yMousePos = event.clientY;//getting y mouse position

myobjeto.style.left=xMousePos;//Move Image Everywhere Mouse Goesgoes
myobjeto.style.top=yMousePos;//Move Image Everywhere Mouse

testid.src=flagsetobjetos;//I assign the path to my object
myflotatingobject.style.display = "block";//show the image
}

finally the function that place my image copy where I want

function freevent(){

domObj1 = new Minuevacapa('floatimg'+gcountobjetos,'test'+gcountobjetos,sourceobj.src,xMousePos,yMousePos);
display.innerHTML=domObj1.mylayer;
gcountobjetos++;
document.onmousemove=null;
}

But It doesn't work, I don't know what is the problem, maybe there is an easier way and I'm complicating everything:mad: .

Any suggestion is welcome.
Thanks in advance.

[_Aerospace_Eng_]

Don't reinvent the wheel. There are many scripts out there like this.
http://www.dynamicdrive.com/dynamicindex11/domdrag/

[erickkz]

thanks _Aerospace_Eng_, but in the page they are only dragging and dropping the same image, what I want is make a movable clone of the image.