Results 1 to 6 of 6

Thread: DOM Drag & Drop

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

    Default DOM Drag & Drop

    http://www.dynamicdrive.com/dynamici...drag/index.htm

    I found that script on here awhile ago and I like it. I just can't seem to get multiple images to work.

    Code:
    <script type="text/javascript">
    Drag.init(document.getElementById("example"));
    </script>
    I wasn't sure if this script could support multiple images, but I tried including another file name after "example" seperated by a comma, but it doesn't work.

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Another file name?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Here is an example how you can incorporate the drag and drop feature on multiple images. Use this source and edit only the name of the images (you need to use the image name that you have)
    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>
    		<title> </title>
    		<style type="text/css">
    		
    		</style>
    		<script type="text/javascript" src="dom-drag.js"></script>
    		<script type="text/javascript">
    		window.onload = function(){
    			Drag.init(document.getElementById("example1"));
    			Drag.init(document.getElementById("example2"));
    			Drag.init(document.getElementById("example3"));
    			Drag.init(document.getElementById("example4"));
    		}
    		</script>
    	</head>
    	<body>
    		<img id="example1" src="lips_small.gif" style="position: relative" /> 
    		<img id="example2" src="logo.gif" style="position: relative" />	
    		<img id="example3" src="pattern.gif" style="position: relative" /> 
    		<img id="example4" src="me.gif" style="position: relative" />		
    	</body>
    </html>
    You need to notice certain things before applying the drag and drop on the elements of the page, in your case the elements is images.

    1. You need to specify a unique ID for each images (img) element.

    2. You need to specify a style attribute with a value position:relative for each images (img) element.

    3. You need to hook all the images to the drag and drop script via Drag.init method. So in the above example I've done it via the onload event of window object. You need to apply on each and every element you want to apply the drag and drop. In my source code I want it on the four image so I've called the mentioned method four times and mentioned each of my four items. There are lots of other mechanisms using which you can accomplish this such as using an array and a looping construct but at the moment don't worry about those things.

    3. Now you can load the page in browser and try to drag the elements.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by codeexploiter View Post
    Here is an example how you can incorporate the drag and drop feature on multiple images. Use this source and edit only the name of the images (you need to use the image name that you have) . . .
    I'm not sure how to put this, codeexploiter. Your suggestion/help should probably work as written, and if so help the original poster, so I'm not finding fault with that. Even in the unlikely event that it doesn't work, it certainly points in the right direction. So thank you for all that.

    But - xml/XHTML* for this? Are you out of your mind? And, this script doesn't require an onload event as long as the Drag.init() calls for a given element are after it in the source code, though it can use one. But then why specify one in your example when you know that can potentially conflict with other scripts that may absolutely require an onload event?


    * http://www.webdevout.net/articles/beware-of-xhtml
    Last edited by jscheuer1; 05-09-2008 at 05:26 AM. Reason: add link
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Smile

    Thank you very much, elitecoder. That helped a lot. Your solution was clear, precise, and the code was clean and easy to read.

    Thanks again!

  6. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Hi John,

    In my work I used to follow a pattern like keeping JS, (X)HTML and CSS in seperate sections. So naturally I followed that pattern here also. In my example I could've appended a <script> element just after the HTML elements that want to be dragged & dropped but I thought of avoiding it.

    A mistake I've made here is I haven't clarified anything about the window.onload event and haven't cleared whether the user has any other scripts that uses window.onload. I should have addressed that issue in a better manner. Since it'll execute only one window.onload event and if the user has multiple window.onload based events present then it'll create problems. I use jQuery and YUI and use some custom events like ready, onDOMReady,etc (the ones these framework supports) for this purpose and they used to make a queue effect and will deal with multiple event handlers without any trouble.

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
  •