Question

我需要一个解决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作为叠加层并在我开始拖动时显示它并在我放弃时将其隐藏..但它仍然不起作用。

Answer 1

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

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

Answer 2

为什么它是iframe？

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

jQuery iFrame拖动不起作用

2 个答案: