<script type="text/javascript"> sldValue=0 sldTop=0 sldLeft=0 doDrag=false sldMouseLeft=0 sldMouseTop=0 function getAbsLeft(o) { oLeft = o.offsetLeft while(o.offsetParent!=null) { oParent = o.offsetParent oLeft += oParent.offsetLeft o = oParent } return oLeft } function getAbsTop(o) { oTop = o.offsetTop while(o.offsetParent!=null) { oParent = o.offsetParent oTop += oParent.offsetTop o = oParent } return oTop } function setLeft(o,oLeft) { o.style.left = oLeft + "px" } function setTop(o,oTop) { o.style.top = oTop + "px" } function setPosition(o,oLeft,oTop) { setLeft(o,oLeft) setTop(o,oTop) } function sldMouseDown(e) { if (!e) {e = window.event} doDrag=true o=document.getElementById("sldHead") sldLeft=getAbsLeft(o) sldTop=getAbsTop(o) sldMouseLeft=e.clientX-sldLeft sldMouseTop=e.clientY-sldTop document.getElementById("mouseCapt").innerHTML = "Mouse Position on Mouse Down event : " + e.clientX + "/" + e.clientY document.getElementById("headPos").innerHTML = "Head Position on Mouse Down event : " + sldLeft + "/" + sldTop document.getElementById("mousePosRel").innerHTML = "Relative Mouse Position on Mouse Down event : " + sldMouseLeft + "/" + sldMouseTop } function sldMouseUp(e) { doDrag=false } function sldMouseMove(e) { if (!e) {e = window.event} if (document.getElementById("mousePos")) { document.getElementById("mousePos").innerHTML = "Mouse Position : " + e.clientX + "/" + e.clientY document.getElementById("dragStatus").innerHTML = "doDrag : " + doDrag } if (doDrag) { o=document.getElementById("sldHead") setPosition(o,e.clientX-sldMouseLeft,e.clientY-sldMouseTop) return false } } document.onmousemove = sldMouseMove </script> <div id="sldHead" style="position:absolute;top:4px;left:4px;width:8px;height:8px;cursor:pointer;cursor:hand" onmousedown="sldMouseDown(event)" onmouseup="sldMouseUp(event)"><img src="block.gif"></div> <div id="mousePos" style="position:absolute;height:30px;top:200px;left:4px"></div> <div id="mouseCapt" style="position:absolute;height:30px;top:235px;left:4px"></div> <div id="headPos" style="position:absolute;height:30px;top:270px;left:4px"></div> <div id="mousePosRel" style="position:absolute;height:30px;top:305px;left:4px"></div> <div id="dragStatus" style="position:absolute;height:30px;top:340px;left:4px"></div>
Click here to see the result.
