New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

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!

Simple example:

Drag me!


Directions: Developer's View

Step 1: Add the below code to the <HEAD> section of your page:

Select All

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

Note: See also: author's tutorial page.

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:

<img id="example" src="lips.gif" style="position: relative" />

<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>

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.

<div id="root" style="left:50px; top:50px;">
<div id="handle">Handle</div>
Some text
</div>

<script type="text/javascript">
var theHandle = document.getElementById("handle");
var theRoot = document.getElementById("root");
Drag.init(theHandle, theRoot);
</script>

See complete example

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.

<div id="thumb" style="position: relative; left:0; top:0;"></div>

<script language="javascript">
var aThumb = document.getElementById("thumb");
Drag.init(aThumb, null, 0, 300, 0, 0);
</script>

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:

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

<script language="javascript">
var aThumbv = document.getElementById("thumbv");
var scrolldiv=document.getElementById("scrollcontent");
Drag.init(aThumbv, null, 0, 0, 0, 150);
aThumbv.onDrag = function(x, y) {// x, y contains current offset coords of drag
scrolldiv.style.top=y * (-1) +"px";
}
</script>

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

See complete example

"x" and "y" above contain the horizontal and vertical position of the scrollbar relative to its original position.