nimexx
07-29-2005, 03:52 PM
Im trying to drag an image from an iframe to its parent document. It basically copies the target image to a div on the parent and then moves that div to simulate dragging of the object. The code I have works correctly for an image in the parent document but I seem to be having an event problem trying to drag from an image inside an iframe.
I have included the parent and frame pages below. The problem Im seeing is that when I mousedown on the image in the frame, I get the IE "not-allowed" cursor until I release the mouse button and then the mousedown event fires. The event appears to be happening but something is interferring with the process. Anyone know how to fix this?
parent.htm
<html>
<head>
<style>
<!--
.drag2{VISIBILITY: hidden; POSITION: absolute; CURSOR:hand;Z-INDEX:100;}
-->
</style>
<script language="JavaScript1.2">
<!--
var ie=document.all
var ns6=document.getElementById&&!document.all
var dragdivapproved=false
var dragitemapproved=false
var z,x,y
var tempx,tempy
// MOUSEDOWN
function doDown(event) {
var firedobj=ns6? event.target : event.srcElement
//copy image source to dragimage object
document.getElementById("dragimage").setAttribute("src",firedobj.src)
var firedobj=ns6? event.target : event.srcElement
el= firedobj
tempx=0
tempy=0
while (el.nodeName!="BODY")
{
tempx=tempx + el.offsetLeft
tempy=tempy + el.offsetTop
el = el.parentNode
if (el.nodeName=="BODY"&&el.ownerDocument.parentWindow.name!="") //acount for 1 iframe
{
el= document.getElementById(el.ownerDocument.parentWindow.name)
}
}
//move the drag div to the right location
el = document.getElementById("dragitem")
el.style.left= tempx+2
el.style.top= tempy+2
document.getElementById("dragitem").style.setAttribute("visibility","visible")
dragitemapproved = true;
layerShowing = "false";
document.onmousemove = moveit;
return false;
}
// Drag function
function moveit(e){
//alert("abc")
if (dragitemapproved) {
getMouse(e);
moveDrag(false);
}
return false;
}
function moveDrag(isAnim){
// move thumbnail
div = document.getElementById('dragitem');
divcss = div.style;
divcss.top = mouseY - 36;
divcss.left = mouseX - 49;
}
// Reads mouse X and Y coordinates
function getMouse(e){
if(ie){
mouseY = event.clientY + document.body.scrollTop;
mouseX = event.clientX + document.body.scrollLeft;
}
else if(ns6){
if (e == null && window.event)
e = window.event;
if (e != null) {
mouseY = e.pageY;
mouseX = e.pageX;
}
}
}
function up(){
endDrag();
return false;
}
function endDrag(){
dragitemapproved=false;
document.onmousemove=null;
}
//-->
</script>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<DIV id="dragitem" class="drag2"><img id="dragimage" border="0" src="" width="100" height="100"></DIV>
<iframe id="I2" name="I2" src="frame2.htm" width="240" height="175" border="1" frameborder="1" style="background-color: #FFFFFF"></iframe>
<img id="image1" name="image1" border="0" src="images/1.jpg" width="100" height="100" onmousedown="doDown(event)" onmouseup="up(event)">
</body>
</html>
frame2.htm
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Frame 1</title>
</head>
<body>
<p>Frame 2</p>
<img id="image1" name="image1" border="0" src="images/1.jpg" width="100" height="100" onmousedown="top.doDown(event)" onmouseup="top.up(event)">
</body>
</html>
I have included the parent and frame pages below. The problem Im seeing is that when I mousedown on the image in the frame, I get the IE "not-allowed" cursor until I release the mouse button and then the mousedown event fires. The event appears to be happening but something is interferring with the process. Anyone know how to fix this?
parent.htm
<html>
<head>
<style>
<!--
.drag2{VISIBILITY: hidden; POSITION: absolute; CURSOR:hand;Z-INDEX:100;}
-->
</style>
<script language="JavaScript1.2">
<!--
var ie=document.all
var ns6=document.getElementById&&!document.all
var dragdivapproved=false
var dragitemapproved=false
var z,x,y
var tempx,tempy
// MOUSEDOWN
function doDown(event) {
var firedobj=ns6? event.target : event.srcElement
//copy image source to dragimage object
document.getElementById("dragimage").setAttribute("src",firedobj.src)
var firedobj=ns6? event.target : event.srcElement
el= firedobj
tempx=0
tempy=0
while (el.nodeName!="BODY")
{
tempx=tempx + el.offsetLeft
tempy=tempy + el.offsetTop
el = el.parentNode
if (el.nodeName=="BODY"&&el.ownerDocument.parentWindow.name!="") //acount for 1 iframe
{
el= document.getElementById(el.ownerDocument.parentWindow.name)
}
}
//move the drag div to the right location
el = document.getElementById("dragitem")
el.style.left= tempx+2
el.style.top= tempy+2
document.getElementById("dragitem").style.setAttribute("visibility","visible")
dragitemapproved = true;
layerShowing = "false";
document.onmousemove = moveit;
return false;
}
// Drag function
function moveit(e){
//alert("abc")
if (dragitemapproved) {
getMouse(e);
moveDrag(false);
}
return false;
}
function moveDrag(isAnim){
// move thumbnail
div = document.getElementById('dragitem');
divcss = div.style;
divcss.top = mouseY - 36;
divcss.left = mouseX - 49;
}
// Reads mouse X and Y coordinates
function getMouse(e){
if(ie){
mouseY = event.clientY + document.body.scrollTop;
mouseX = event.clientX + document.body.scrollLeft;
}
else if(ns6){
if (e == null && window.event)
e = window.event;
if (e != null) {
mouseY = e.pageY;
mouseX = e.pageX;
}
}
}
function up(){
endDrag();
return false;
}
function endDrag(){
dragitemapproved=false;
document.onmousemove=null;
}
//-->
</script>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<DIV id="dragitem" class="drag2"><img id="dragimage" border="0" src="" width="100" height="100"></DIV>
<iframe id="I2" name="I2" src="frame2.htm" width="240" height="175" border="1" frameborder="1" style="background-color: #FFFFFF"></iframe>
<img id="image1" name="image1" border="0" src="images/1.jpg" width="100" height="100" onmousedown="doDown(event)" onmouseup="up(event)">
</body>
</html>
frame2.htm
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Frame 1</title>
</head>
<body>
<p>Frame 2</p>
<img id="image1" name="image1" border="0" src="images/1.jpg" width="100" height="100" onmousedown="top.doDown(event)" onmouseup="top.up(event)">
</body>
</html>