3

我需要一个与 jQuery 相关的问题的解决方案。

为了能够将可拖动的 li 元素拖放到 iFrame 中，我尝试了以下操作：

$(document).ready(function(){
    $("li").draggable({
        helper : "clone",
        cursor: "move",
        iframeFix: true,
        start: function() {
            $("#overlay").show();
        },
        stop: function() {
            $("#overlay").hide();
        }
    });
    $("#iframe").load(function() {
        $("#iframe").contents().find("[data-role=page]").droppable({
            hoverClass: "hover",
            tolerance: "touch",
            iframeFix: true,
            over: function(ev, ui) {
                ui.draggable;
            },
            drop: function(ev,ui) {
                $(ev.target).append(ui.draggable.attr("role"));
            }
        });
    });
});

html代码：

<ul class="left">
        <li role="header">
            <!-- Header --><div class="sprite" style="background: #000; width: 100px; height: 57px;"></div>
            <span>Header</span>
        </li><li role="image">
            <!-- Image --><div class="sprite" style="background: #333; width: 65px; height: 50px;"></div>
            <span>Image</span>
        </li>
    </ul>
    <!-- Phone -->
    <div class="left" style="position: relative;margin-left: 30px;">
        <div id="overlay" class="ui-draggable-iframeFix" style="width: 320px; height: 480px; display: none;position: absolute;z-index: 9999999999999;"></div>
        <div style="color: #000; position: relative; top: 115px; left: 30px; wdith: 588px; height: 507px;">
            <iframe id="iframe" src="../" width="300px" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>

这是 iframe 的内容：

<html>

<head>

</head>

<body style="background: #fff">
    <!-- Home -->
    <div data-role="page" data-theme="d" id="page1" style="height: 400px;">

        Content
    </div>
</body>

我试图创建一个 div 作为叠加层，并在我开始拖动时显示它并在我放下时隐藏它..但它仍然不起作用。

4

2 回答 2

1

此功能的通用形式似乎在此处演示：

http://www.bluestudios.co.uk/blog/sandbox/iframe/iframe.html

于 2013-03-06T16:40:09.117 回答
-3

为什么必须是 iframe？

为什么你不能把两个 div 放在一个页面上？

于 2013-03-14T22:10:55.267 回答