<head>
<title>Drag/Drop HTML elements</title>
<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>
</head>
<body>
<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="../img/head.gif" style="height:8px;width:8px;border:0"/></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>
</body>
</html>
<title>Drag/Drop HTML elements</title>
<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>
</head>
<body>
<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="../img/head.gif" style="height:8px;width:8px;border:0"/></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>
</body>
</html>