iFrame 导致 IE7 中的脚本拖拽问题（包括完整代码）？答案

【问题标题】：iFrame causes scriptaculous dragging issues in IE7 (full code included)?iFrame 导致 IE7 中的脚本拖拽问题（包括完整代码）？
【发布时间】：2008-12-15 17:21:47
【问题描述】：

当我在 IE7 中将可拖动 div 内的链接拖动到 iframe 上时，我得到了非常奇怪的结果。试试下面的代码，如果你对如何解决这个问题有任何建议，请告诉我。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js?load=effects,dragdrop,controls"></script>
    <!--<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>

【问题讨论】：

标签： iframe internet-explorer-7 scriptaculous draggable

【解决方案1】：

我发现优雅地处理这个问题的唯一方法是在 iframe 上放置一个透明度 = 1% 的全尺寸 div，然后将我的内容拖到它上面。

PS IE6 和 IE8 也有拖拽问题。

【讨论】：

【解决方案2】：

我无法测试你的代码。但我正在开发一个 iframe，在 iframe 顶部也有可拖动的项目。

我遇到的问题是 starteffect 在设置它的不透明度时遇到了问题。我所做的是 starteffect:'' 在我的新 Draggable js 代码中，并在 iframe 中创建了一个干净的 div。

这是我的一段代码：

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

对于整页 iframe，我来到了这个网站，它非常适合我： http://www.dev-explorer.com/articles/full-page-iframe

希望对你有帮助..

【讨论】：

【解决方案3】：

您可以发布代码吗？我不确定我是否理解。

我将 iframe 包裹在一个 div 中，它没有任何区别。

<div style="filter:alpha(opacity=1); opacity: 0.01; -moz-opacity:0.01;">
     <iframe>   
     </iframe>
</div>

【讨论】：

对不起，我应该更清楚...在 DOM 中的 iframe 之后放置一个 div，使其位于 iframe 之上...（例如，如果它不透明，您应该看不到您的 iframe...然后将 alpha 不透明度设置为非常低的值（例如 1%）...现在当您拖动时，iframe 不会注册事件。
opacity:0.01;/*好的浏览器*/ filter:alpha(opacity=1);/*IE6/IE7*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity= 1)";/*IE8*/