.drag {
width: 200px;
height: 200px;
position: absolute;
border: 1px solid black;
background: silver
}
/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Michael Burt :: http://mburt.funpic.org */
var ie = document.all
var ns = document.getElementById && !ie
function dragbyclass(e) {
var fobj = ns ? e.target : event.srcElement
if (fobj.tagName=="DIV" && fobj.className=="drag") {
var ev=e||event
var offsetx=ev.clientX-fobj.offsetLeft
var offsety=ev.clientY-fobj.offsetTop
document.onmousemove=function() {
fobj.style.left=ev.clientX-offsetx
fobj.style.top=ev.clientY-offsety
return false
}
fobj.onmouseup=function() {
document.onmousemove=null
}
}
}
document.onmousedown=dragbyclass
Drag number ONE
Drag number TWO