Question

如果在iFrame外部有一个可拖动的可拖动内容，并且在iFrame中有一个droppable，那么当使用iframeFix选项时，它可以正常工作。但是当你在iframe周围引入一个可滚动的div时，droppable的坐标不会更新，并且在滚动之前保持在原始位置。

e.g。在这个例子的左上角

main.html中

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js""></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script>
        $(function () {
        $("iframe").load(function () {
            var iframe = $(this).contents();
            iframe.find('#iframe_container').droppable(
            {
                iframeFix: true,
                drop: function (event, ui) { alert('dropped'); }
            });
        });
        $('#drag').draggable({iframeFix: true});
    });
    </script>
</head>
<body>
    <div style="width:400px; height:200px; overflow:auto">
    <iframe src="iframe.html" style="width:400px; height:400px;"></iframe>
     </div>
    <div  style="width:20px; height:20px; background-color: #808080" id="drag"></div>
</body>
</html>

Iframe.html的

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
     <div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
     </div>
 </body>
 </html>

有谁知道为什么会发生这种情况或知道此问题的解决方法？

内置iframe的Droppable可滚动div

0 个答案: