Hi:
I have noticed a strange thing when I was trying to do a drag-and-drop on
my page which is full of iFrame. The object I am draging will follow the
cursor ONLY when the cursor enters the iFrame area FROM TOP-LEFT
QUADRANT!!! If the cursor enters the iFrame area from some other angles,
the object I am draging will get seperated from the cursor and will be
picked up when the cursor reaches the edge of iFrame.
Does anybody have any solutions on this?
Thanks!
Tim Zhang
The following is the code for you to see the situation in action:
*****************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Untitled</title></head>
<script language="JavaScript">
var dragObject;
document.onmousedown = Document_OnMouseDown;
document.onmousemove = Document_OnMouseMove;
document.onmouseup = Document_OnMouseUp;
function Document_OnMouseDown(){
if (event.srcElement.drag == 'enable') {
dragObject = event.srcElement;
dragObject.style.position = 'absolute';
dragObject.style.pixelLeft = event.clientX +
document.body.scrollLeft;
dragObject.style.pixelTop = event.clientY +
document.body.scrollTop;
}
}
function Document_OnMouseMove(){
if (dragObject && dragObject.drag=='enable') {
dragObject.style.pixelLeft = event.clientX +
document.body.scrollLeft;
dragObject.style.pixelTop = event.clientY +
document.body.scrollTop;
}
}
function Document_OnMouseUp(){
if (dragObject && dragObject.drag=='enable') {
dragObject.style.pixelLeft = 300;
dragObject.style.pixelTop = 300;
dragObject = null;
}
}
</script>
<body>
this is test page for drag-and-drop with iFrame<br><br><br>
<div drag='enable' style="cursor:move; width:300; background:#ffffcc">drag
me over iFrame below please</div>
<br><br><br><br>
<iFrame width="200" height="200" src="iFrame1.html"></iframe>
</body></html>
***********************************************************************
View Cart
