Integrating Drag & Drop w/ Drop Down menu [Archive]

View Full Version : Integrating Drag & Drop w/ Drop Down menu

weirddemon

05-09-2008, 05:54 AM

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:

</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:

<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

rangana

05-09-2008, 07:19 AM

Have you tried modifying this part:

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

to:

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

weirddemon

05-10-2008, 04:54 AM

I did kind of try that.

This is how the image code was inside of the table for the drop down list:
<img src="images/Serpentine_1.jpg" name="pictures" width="99" height="100">

By adding
id="serpentine2" style="position:relative;" making it
<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:
Drag.init(document.getElementById("serpentine"));

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

weirddemon

05-10-2008, 05:25 AM

I fixed it.

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

Thanks again