1

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

例如本例中的左上角

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>

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

4

0 回答 0