DOM Drag & Drop script
Description: This is a superb DOM drag and drop script that be used on any relatively or absolutely positioned element on the page to make it instantly dragable. What we like most about this script is its very compact, no fuss design. The script also fires 3 custom event handlers that let your page sense and react to the dragging in some fashion. Very nice!
Step 1: Add the below code to the <HEAD> section of your page:
Step 2: As you can see, this script references an external .js file. Download "dom-drag.js" (right click, and select "Save-As"), and upload to your web page directory. And that's it, well the installation part at least.
Applying the script to an element
Now here comes the fun part, making an element on the page dragable!
The basic version
To make an element draggable using this script simply call Drag.init(obj), with "obj" being the reference to the element in question. For example:
A couple of important points to mention here:
This script can only be used on relatively or absolutely positioned elements. Furthermore, you should define its "position" inline inside the element, for example:
<img src="cake.gif" style="position: relative" />.
The method Drag.init(obj) obviously should be called following the element in question. Alternatively you can also call this method after the page has loaded (window.onload).
Creating a draggable handle
Sometimes you want to set only a special area within a complex object to be draggable - aka a handle. To do this, pass two references to the method Drag.init(): the handle and the root.
When you view the source of the example page above, notice how while most of the CSS for the DIV is defined in the HEAD section of the page, at the very least, the "top" and "left" properties to affect initial positioning need to be defined inside the <DIV> tag itself.
Limiting the range of the drag
You can also set up the drag behavior in a way so the dragging is limited by range, whether vertically or horizontally. This is useful, for example, when you're creating an artificial scrollbar, and it should only be allowed to be dragged vertically or horizontally a certain distance.
See another example. (absolutely positioned scrollbar instead of relative).
Those 4 numbers at the end are the constraining rectangle of the draggable object. They go in the order: minX, maxX, minY, maxY. You can set some of them to null to tell DOM-Drag that motion in that direction should not be constrained. Note also how we have set the root object parameter to null in this case, since the thumb is not a handle for anything.
Drag and react
What good is dragging if it your page cant be aware of and react to this action? DOM-Drag fires three events into the environment that you can tap into:
These custom event handlers allow your page to react to the dragging in any fashion your creativity takes you. Take a look at this script to see how to use some of these event handlers:
"x" and "y" above contain the horizontal and vertical position of the scrollbar relative to its original position.