A Slacker's Guide to DHTML: Dragging Things Around

DHTML SCRIPTS

Menu/Navigation
Special Effects
Images
Forms
Text/Announcements
Windows/Pop-ups
Clocks/Countdowns
Miscellaneous

Drag Layers

Instructions: It's cool. Check it out. All you have to do to make a layer or object draggable is to add the class 'drag' to almost any item in your page. Look at this example:


<img src="http://www.here.com/righthere.gif" class="drag">

or

<div class="drag">

This is in the draggable layer

</div>

See how easy it is?
Drag this image around:

This goes in the HEAD of your document.

Select All & Copy

//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

Home - Sitemap
Complete HTML Guide - Free Downloads for Webmasters - Tips & Tricks - Tag Reference
Style Sheets Tutorial - JavaScript Library - Dynamic HTML Script Library - XHTML Primer

dhtml/draglayers.html

BIGGER ARCHIVES
MORE INFO
Everything I am not

http://www.dynamicdrive.com
http://www.dhtmlzone.com
http://www.dhtmlshock.com

Just about every Dynamic HTML script on this site is ©opyright Dynamicdrive.com, DHTML Zone, DHTML Shock, or the person whose name appears in the credits to the script. Let it be known that I wrote NONE of them.