New Revised CSS Library Forums Web Tools

Dragable elements Script

Author: Dynamic Drive

Note: Updated Dec 22nd, 05 to work in Firefox and Opera.

Description: A versatile script that enables any DIVs, image(s) or text on a page to be dragable. Simply give these elements a class of "drag". For a script with more functionality, see: DOM Drag & Drop script.

Demo:

Draggable DIV

Directions

Step 1: Insert the following into the <head> section of your page:

Select All
<style type="text/css"> .drag{ position:relative; cursor:hand; z-index: 100; } </style> <script type="text/javascript"> /*********************************************** * Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var dragobject={ z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, initialize:function(){ document.onmousedown=this.drag document.onmouseup=function(){this.dragapproved=0} }, drag:function(e){ var evtobj=window.event? window.event : e this.targetobj=window.event? event.srcElement : e.target if (this.targetobj.className=="drag"){ this.dragapproved=1 if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0} this.offsetx=parseInt(this.targetobj.style.left) this.offsety=parseInt(this.targetobj.style.top) this.x=evtobj.clientX this.y=evtobj.clientY if (evtobj.preventDefault) evtobj.preventDefault() document.onmousemove=dragobject.moveit } }, moveit:function(e){ var evtobj=window.event? window.event : e if (this.dragapproved==1){ this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" return false } } } dragobject.initialize() </script>

Once the script is installed, enabling any image on the page to be dragable is a snap. Lets take the following html document as an example:

<html>
<head>
<!--drag engine code installed 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, simply add the line class="drag" into the <img> tags, like this:

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

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.