DOM Drag & Drop

**weirddemon** · 05-09-2008, 03:28 AM

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

**jscheuer1** · 05-09-2008, 03:46 AM

Another file name?

**codeexploiter** · 05-09-2008, 05:08 AM

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.

**jscheuer1** · 05-09-2008, 05:21 AM

Originally Posted by codeexploiter

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

**weirddemon** · 05-09-2008, 05:24 AM

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!

**codeexploiter** · 05-09-2008, 12:01 PM

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.

Thread: DOM Drag & Drop

Thread Tools

Search Thread

DOM Drag & Drop

Bookmarks

Bookmarks

Posting Permissions