I've been able to create a basic DIV which I can drag around the page. The code might not be the best, but it works so I'm happy enough for now ... well it almost works !!
It works fine if the DIV contains an image, text etc. The problem arises when I put an IFRAME in there. As soon as the mouse gets over the IFRAME during dragging, the DIV stops moving with it (because the onMouseMove is only being called when the mouse is over the parent. Can anybody help me figure out how to make it work properly? Do I need to do something with even bubbling (I don't even know exactly what that is exactly). my code is below. I just changed the color of the DIV temporarially so that I'd know when the onmousedown and onmouseup were being called:
It works fine if the DIV contains an image, text etc. The problem arises when I put an IFRAME in there. As soon as the mouse gets over the IFRAME during dragging, the DIV stops moving with it (because the onMouseMove is only being called when the mouse is over the parent. Can anybody help me figure out how to make it work properly? Do I need to do something with even bubbling (I don't even know exactly what that is exactly). my code is below. I just changed the color of the DIV temporarially so that I'd know when the onmousedown and onmouseup were being called:
Code:
<html>
<head>
<title>follow me ... </title>
<script type="text/javascript" language="JavaScript">
var moveIt = '';
var offsetX = 0;
var offSetY = 0;
function moveMe()
{
if(moveIt)
{
var obj = document.getElementById("image1");
obj.style.left = event.clientX + offSetX + "px";// + window.document.documentElement.scrollLeft;
obj.style.top = event.clientY + offSetY + "px";// + window.document.documentElement.scrollTop;
}
}
function getOffSets()
{
offSetX = parseInt(document.getElementById("image1").style.left) - event.clientX; offSetY = parseInt(document.getElementById("image1").style.top) - event.clientY; //alert(offSetX + " " + offSetY);
}
</script>
</head>
<body onMouseMove = "moveMe(); return false">
<div onMouseUp="moveIt=''; image1.style.background='#f0f0f0'" onMouseDown="moveIt='true'; getOffSets(); image1.style.background='#000000';" id="image1" style="position: absolute; left: 0px; top: 0px; background: #f0f0f0" onMouseDown="return false;" onClick="moveMe()"><img src="iconfolder.gif"><br>
<iframe src="contacts/viewcontact.php?23" width="300" height="450"></div>
</body>
</html>
