Dragable elements Script
Note: Updated Dec 22nd, 05 to work in Firefox and Opera.
Description: A versatile script that enables any DIVs, image(s) or text on a page to be dragable. Simply give these elements a class of "drag". For a script with more functionality, see: DOM Drag & Drop script.
Demo:
Step 1: Insert the following into the <head> section of your page:
Once the script is installed, enabling any image on the page to be dragable is a snap. Lets take the following html document as an example:
<html> <head> <!--drag engine code installed here--> </head> <body> <img src="test.gif"><br> <img src="test2.gif"><br> <b>"Hi there</b> </body> </html>
To apply drag-drop capabilities to the first two images above, simply add the line class="drag" into the <img> tags, like this:
<html> <head> <!--drag engine code installed here--> </head> <body> <img src="test.gif" class="drag"><br> <img src="test2.gif" class="drag"><br> <h1><b>"Hi there</b></h1> </body> </html>
The two images will now move when the mouse drags them.
What about text elements, you say? Well, the engine handles them just as well:
<html> <body> <img src="test.gif"><br> <img src="test2.gif"><br> <h1><b class="drag">Hi there</b></h1> </body> </html>
Hi there
Notice that the class="drag" declaration is added to the innermost element, the <b> element, and not the <h1> element.