Results 1 to 3 of 3

Thread: Using a drag and drop script with a drop down menu

  1. #1
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Using a drag and drop script with a drop down menu

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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    <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.

  3. #3
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •