我需要解决一个与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覆盖层，当我开始拖动时显示它，并在放下时隐藏它...但它仍然无法正常工作。