Help with DOM Drag & Drop script

[ifizzypop]

1) Script Title: DOM Drag & Drop script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/domdrag/

3) Describe problem: i want to make a type of game were you can drag images and drop them on to a another image, like them dress up games, i just dont know how to use more then 1 image to drag and drop, mybe if i give you the link to what i have done so far will help, http://www.freewebs.com/fizzypop-xx/dressup.htm this is the code i put in,


<center><a href="http://s195.photobucket.com/albums/z138/yohanna101/?action=view&current=template.png" target="_blank"><img src="http://i195.photobucket.com/albums/z138/yohanna101/template.png" border="0" alt="Photobucket"></a></center><br/>
<br/>
<br/>
<noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://fizzypop-xx.webs.com/dom-drag.js"></script>
<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/pinkskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/purpleskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/buleskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/greenskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>
<div id="root" style="left:50px; top:50px;">
<div id="handle">
</div>
Some text
</div>

<script type="text/javascript">
var theHandle = document.getElementById("handle");
var theRoot = document.getElementById("root");
Drag.init(theHandle, theRoot);

</script>

<div id="thumb" style="position: relative; left:0; top:0;"></div>

<script language="javascript">
var aThumb = document.getElementById("thumb");
Drag.init(aThumb, null, 0, 300, 0, 0);
</script>

<script language="javascript">
var aThumbv = document.getElementById("thumbv");
var scrolldiv=document.getElementById("scrollcontent");
Drag.init(aThumbv, null, 0, 0, 0, 150);
aThumbv.onDrag = function(x, y) {// x, y contains current offset coords of drag
scrolldiv.style.top=y * (-1) +"px";
}
</script>


<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script>

i would also like to know how you can flaten all the images that you drag and drop into one image.
sorry if its confusing :confused:

[Nile]

Replace:


<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/pinkskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/purpleskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/buleskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

<img id="example" src="http://i195.photobucket.com/albums/z138/yohanna101/greenskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

With:


<img id="exampleA" src="http://i195.photobucket.com/albums/z138/yohanna101/pinkskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("exampleA"));
</script>

<img id="exampleB" src="http://i195.photobucket.com/albums/z138/yohanna101/purpleskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("exampleB"));
</script>

<img id="exampleC" src="http://i195.photobucket.com/albums/z138/yohanna101/buleskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("exampleC"));
</script>

<img id="exampleD" src="http://i195.photobucket.com/albums/z138/yohanna101/greenskin.png" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("exampleD"));
</script>



I hope this works, if you need to add more grudually increase the letter after "example." Ex:
exampleA, exampleB, exampleC

[fxgirlz]

Nile, thanks for the answer. I am wondering about how to make the pic draggable???