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

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.

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:

.onDragStart(x,y)
.onDragEnd(x,y)
.onDrag(x,y).

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: