Web Analytics Made Easy -
StatCounter mousemove event between iframe and parent - CodingForum

Announcement

Collapse
No announcement yet.

mousemove event between iframe and parent

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • mousemove event between iframe and parent

    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

    Code:
    <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

    Code:
    <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>
Working...
X