Integrating Drag & Drop w/ Drop Down menu

Hi. I've recently been able to configure the drag and drop code with the help of Elitecoder so that I can add multiple images in the same page that can be draggable

For the most part, this is the code that Elitecoder came up with:

Code:

</script> <title> </title> <style type="text/css">body { background-image: url(images/8.5x11.gif); background-repeat: no-repeat; background-position:center; } </style> <script type="text/javascript" src="scripts/dom-drag.js"></script> <script type="text/javascript"> window.onload = function(){ Drag.init(document.getElementById("serpentine")); Drag.init(document.getElementById("midsection")); Drag.init(document.getElementById("example3")); Drag.init(document.getElementById("example4")); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <img id="serpentine" src="images/Serpentine_1.jpg" style="position: relative" /> <img id="midsection" src="images/4'-Section--Mid.gif" style="position: relative" /> <img id="example3" src="pattern.gif" style="position: relative" /> <img id="example4" src="me.gif" style="position: relative" />

This is the drop down menu I want to use:

Code:

<table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="mygallery"><p> <select name="picture" size="1" onChange="showimage()"> <option selected value="images/Serpentine_1.jpg">Serpentine</option> <option value="myaunt.gif">Picture of my aunt</option> <option value="brother.gif">Picture of my brother</option> </select> </p> </form> </td> </tr> <tr> <td width="100%"><p align="center"><img src="images/Serpentine_1.jpg" name="pictures" width="99" height="100"></td> </tr> </table>

I have tried to configure the code so that I can add the drag and drop functionality to the images within the drop down menu to no avail.

Thanks

Have you tried modifying this part:

Code:

<img src="images/Serpentine_1.jpg" name="pictures" width="99" height="100">

to:

Code:

<img src="images/Serpentine_1.jpg" name="pictures" width="99" height="100" id="example" style="position:relative;"> <script type="text/javascript"> Drag.init(document.getElementById("example")); </script>

I did kind of try that.

This is how the image code was inside of the table for the drop down list:

Code:

<img src="images/Serpentine_1.jpg" name="pictures" width="99" height="100">

By adding

Code:

id="serpentine2" style="position:relative;"

making it

Code:

<img src="images/Serpentine_1.jpg" name="pictures" width="99" height="100" id="serpentine2" style="position:relative;">

By adding that piece of code giving the image the unique id and giving it a position, it should work. All I should have to do is add the id into "Drag.init"

Like this:

Code:

Drag.init(document.getElementById("serpentine"));

It's not working, so I'm probably doing something wrong

I fixed it.

Thanks Rangana. What you said worked just fine. I didn't have unique ids for that image.

Thanks again