DOM Drag & Drop script

Quick search

Scripts - DHTML

Scripts - DHTML (new)

Web Developer Blog

Web Developer Blog (new)

Scripts and Applications

Ajax
ASP
ASP.NET
C and C++
CFML
CGI and Perl
Flash
Java
JavaScript
PHP
Python
XML

Software Downloads

DHTML Scripts - Detail

Date added: 2007-05-12 19:05:01

- DOM Drag & Drop script

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:

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-Drop-script/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

See complete example

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

Related DHTML Scripts

YUI Color Picker	Date Added: 2007-05-18
-User Submitted Need a color picker for your online forms or application? This advanced color picker is based on Yahoo's excellent UI library, and features a fully interactive, drag and drop...

ColorJack DHTML color picker	Date Added: 2007-05-18
-User Submitted ColorJack DHTML color picker is a cross browser, sleek color picker that's compact to boot. Licensed under Creative Commons, use it on your sites or web apps....

pathGenerator	Date Added: 2007-06-16
-User Submitted _pathGenerator is an online wizard that allows anyone to easily create an animating layer that follows any desired path. Just drag your mouse to map out its course,...

VML Editor	Date Added: 2007-06-16
-User Submitted VML (Vector Markup Language) is a text based vector graphics format proprietary to Internet Explorer. Jacco has created the following powerful VML editor to allow you to use your...

Time-based Progress Bar	Date Added: 2007-06-16
-User Submitted This is a fully customizable "time based" progress bar. Set any duration (ie: 10 seconds) for the script to finish loading the bar. A great script to prov...

Event-based Progress Bar	Date Added: 2007-06-16
-User Submitted This is an event-based progress bar which you can add to existing scripts that require graphical representation. Using 3 pre-exposed methods, you control prec...

WinXP Progress Bar	Date Added: 2007-06-16
-User Submitted A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can ...

Pie Graph script	Date Added: 2007-06-16
-User Submitted This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page....

Line Graph script	Date Added: 2007-06-16
-User Submitted Based on the same library as the Pie Graph script, this is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page....

Find In Page Script	Date Added: 2007-06-16
-User Submitted This cross browser DHTML script simulates the Edit> Find In Page feature of the browser to allow your visitors to easily search for a particular text on your page.&nb...

Tip of the day dialog	Date Added: 2007-06-16
-User Submitted Provide daily tidbits of interesting information to your visitors, in an even more interesting way, with this ultimate tip of the day script!...

Copy text to clipboard script	Date Added: 2007-06-16
-User Submitted This "demo" script does two things: 1) identifies the selected text on the page 2) copies this text to clipboard. As part of a larger application...

onMouseover scrollbar effect	Date Added: 2007-06-16
-User Submitted Use this unique script to apply a rollover effect to your webpage's scrollbar!...

Ajax load XML file script	Date Added: 2007-06-16
-User Submitted This script demonstrates the concept of using Ajax to load a simple XML file and display it on the page....

Gradient Bar	Date Added: 2007-06-16
-User Submitted An impressive demonstration of using DHTML code to render a gradient bar. Easily change the bar's color, position and direction, all through the setting of a few variabl...