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:

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

**rangana** · 05-09-2008, 07:19 AM

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>

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

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

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

Thread: Integrating Drag & Drop w/ Drop Down menu

Thread Tools

Search Thread

Integrating Drag & Drop w/ Drop Down menu

Bookmarks

Bookmarks

Posting Permissions