Categories:
Partners
Web Hosting
We've partnered with HostGator for reliable, affordable hosting starting at $3.95/mon. Use coupon code "javascriptkit25" for 25% off any package.

Drag and Drop using DHTML

A while back, a demonstration of an element being dragged around in a browser during a computer show finally convinced web developers that DHTML was not just another version of JavaScript, but something more.

 tn00607a.gif (1499 bytes)   tn00738a.gif (1685 bytes)

In this tutorial, we will demonstrate how to implement onto your web page drag-drop capabilities in IE 4.x; this is not a tutorial on how to program your own drag-drop capabilities, but rather, how to install a pre-made script that enables drag drop.

Installing the drag-drop engine

We've designed and created the drag-drop engine to make it as easy to use as possible. The below is the engine, and should be inserted in the <head> section of your page:

<head>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
/*Credit JavaScript Kit www.javascriptkit.com*/
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
</head>

Once the engine has been installed, enabling any element in a page to be dragable is a snap. Simply give the element a class="drag" declaration.

Dragging image elements

Assuming we have in front of us a page like this:

<html>
<head>
<!--drag engine code 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, do this:

<html>
<head>
<!--drag engine code 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.

Dragging text elements

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.

Now that elements in a page can be dragged, its time to find a practical reason to do so!

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.