Menu
I need a solution for my jQuery related problem.
In order to be able to drop draggable li-elements into an iFrame I have tried this:
$(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 code:
<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>
here is the content of the iframe:
<html>
<head>
</head>
<body style="background: #fff">
<!-- Home -->
<div data-role="page" data-theme="d" id="page1" style="height: 400px;">
Content
</div>
</body>
I have tried to create a div as an overlay and display it when I start dragging and hide it when I drop.. but it still does not work.
362
The generic form of this functionality appears to be demonstrated here:
http://www.bluestudios.co.uk/blog/sandbox/iframe/iframe.html
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
