Using a drag and drop script with a drop down menu [Archive]

View Full Version : Using a drag and drop script with a drop down menu

weirddemon

05-12-2008, 03:40 AM

I was recently able to include a javascript to make images draggable within a drop down menu. I need to duplicate the image while still being able to drag it.

When dragging the image, after changing the drop down menu selection, the image just changes while being in it's previous position. The part of the code that I've included the "drag" function is:
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="images/Serpentine_1.jpg" name="pictures" width="99" height="100" id="serpentine1" style="position:relative;"></td>
</tr>
</table>

There is a piece of the code that tells us what text you see when you look in the drop down menu and what image that text applies to
<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="images/4'-Section.gif">4' Section</option>
<option value="example">Example</option>
</select>
</p>
</form>
</td>
</tr>

When I try to include the drag function into the images without having the function into the previous code, it makes it undraggable.

Here is the entire code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script language="javascript">

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</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("serpentine1"));
Drag.init(document.getElementById("4foot"));
}
</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="example" src="pattern.gif" style="position: relative" />
<img id="example4" src="me.gif" style="position: relative" />

<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="images/4'-Section.gif" id="4foot">4' Section</option>
<option value="Example">Example</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" id="serpentine1" style="position:relative;">
</td>
</tr>
</table>
</body>
</html>

I've included the zip file if you want to see exactly what it is I am working with.

Thanks

ddadmin

05-12-2008, 06:24 AM

Hi:
Please don't start a new thread for an existing question (not sure why you had emptied your other thread on the same question in the DD scripts category). Just reply to it if there's something new you wish to add.

Looking at your demo, I'm not entirely sure I understand what you mean by:

When I try to include the drag function into the images without having the function into the previous code, it makes it undraggable.

However, if what you're trying to do is basically have the drop down list show an image as a preview, plus another identical image that's draggable, a set up like this works:

<script type="text/javascript" src="dom-drag.js"></script>

<script type="text/javascript">

function showhideimg(img){
document.getElementById("previewimg").src=img
document.getElementById("dragimg").src=img
}

</script>

<body>

<form>
<select onChange="showhideimg(this.options[this.selectedIndex].value)">
<option selected value="photo1.jpg">Serpentine</option>
<option value="photo2.jpg" id="4foot">4' Section</option>
<option value="photo3.jpg">Picture of my brother</option>
</select>
</form>

<img id="previewimg" src="photo1.jpg" />

<div id="dragarea" style="width: 100%; height: 300px; background: yellow">
<img id="dragimg" style="position:relative" src="photo1.jpg" />
</div>

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

This assumes that only the image chosen within the selected option is shown, hiding the previous image shown in the last selected option.

weirddemon

05-12-2008, 06:31 AM

Thanks for the example. I'll try including it and see what happens.

Sorry for moving the page over. I just wasn't getting any feedback over there and here it seems that I get mor efeedback. I'll stick to one sectiopn next time :D

Looking around I saw that someone said that used this same script and used "onbeforedragstart" to clone images. And that's what I'm basically trying to do; clone images. But I wasn't sure how to incorporate it.