3
我需要解決我的jQuery相關問題。jQuery iFrame拖動不起作用
爲了能夠拖動鋰元素放到一個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作爲覆蓋並顯示它，當我開始拖動和隱藏它時，我放棄..但它仍然無法正常工作。
這是使用prototype.js，但基本概念顯示。我會試着回到這個並將其翻譯成jQuery。 – digitalextremist 2013-03-06 17:08:51