views:

1131

answers:

3

When I drag a link that is inside a draggable div over an iframe in IE7, I get very strange results. Try the code below and let me know if you have any suggestions about how to fix this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <!--<script type="text/javascript" src="/js/prototype.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js?load=effects,dragdrop,controls"&gt;&lt;/script&gt;
    <!--<script type="text/javascript" src="/js/scriptaculous.js?load=effects,dragdrop,controls"></script>-->
</head>


<body>
    <div id="test" style="background-color: #aaaaaa; width: 200px; height: 50px;">
     <a href="blah" onclick="blah(); return false;">blah</a>
    </div>
    <iframe> 
    </iframe>
</body>

<script>
function blah(){
    //blackbird.debug("blah");
}

    var dummy = new Draggable("test", {scroll:window,scrollSensitivity: 20,scrollSpeed: 25, revert: true, onStart: onDragStart, onEnd: onDragEnd });
    var temp;
    function onDragStart(drgObj,mouseEvent){
      temp = mouseEvent.target.onclick;
      mouseEvent.target.onclick = function(e){
       mouseEvent.target.onclick = temp;
       return false;
      }
    }

    function onDragEnd(drgObj,mouseEvent){
    }
</script>
</html>
+3  A: 

I found the only way to handle this gracefully was to place a full size div, with transparency = 1% over the iframe, then drag my content over top of it.

PS the dragging issue is in IE6 and IE8 too.

scunliffe
A: 

Can you post the code? I am not sure I understand.

I wrapped the iframe in a div and it made no difference.

<div style="filter:alpha(opacity=1); opacity: 0.01; -moz-opacity:0.01;">
     <iframe>   
     </iframe>
</div>
Tony
sorry, I should have been more clear... layer a div (after) the iframe in the DOM so that it lies on top of your iframe... (e.g. if it is opaque, you should not see your iframe... then set the alpha opacity to a very low value (e.g. 1%)... now when you drag, the iframe won't register events.
scunliffe
opacity:0.01;/*good browsers*/filter:alpha(opacity=1);/*IE6/IE7*/-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";/*IE8*/
scunliffe
+1  A: 

Well i couldnt test youre code. But i'm working on a iframe also with draggable items on top of the iframe.

I had the problem that the starteffect had problems setting it's opacity. thing i did was starteffect:'' in my new Draggable js code, and did a made a clean div with in there the iframe.

Here is a piece of my code:

<div id="main_container">
    <div>
        <iframe></iframe>
    </div>
    <div id="youredragelelement"><img /></div>
</div>

for a full page iframe i came along this site and it works perfect for me: http://www.dev-explorer.com/articles/full-page-iframe

Hope it helps..