jQuery iFrame 拖动不起作用答案

【问题标题】：jQuery iFrame drag not workingjQuery iFrame 拖动不起作用
【发布时间】：2013-03-06 16:33:08
【问题描述】：

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

【问题讨论】：

标签： jquery iframe drag-and-drop draggable

【解决方案1】：

这里似乎演示了此功能的通用形式：

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

【讨论】：

那是使用prototype.js，但是基本概念已经展示了。我会尝试回到这个并将其转换为 jQuery。

【解决方案2】：

为什么必须是 iframe？

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

【讨论】：

如果您给出答案，请考虑给出更多解释或提供示例代码。如果您对作者有任何疑问，可以在评论部分提出。