|
Notice that you
can move the graphic above around the page with your mouse? Here's how to get
that effect, courtesy of Dynamic Drive:
Step 1: Add the below code to the <HEAD> section of your page:
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
//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>
Step 2: Once the script is installed, enabling an element on the page to be dragable is a snap. Simply add the attribute class="drag" to its tag. Here are a couple of examples:
Example #1:
<img src="test.gif" class="drag">
Example #2:
<div class="drag"><b>This is some text inside a DIV</b></div>
In general you can apply this attribute to any HTML element to give it a drag personality. The rare exception is <TABLE>.
|
