I want to drag and drop element into iframe and sort it inside the iframe
Here is my code :
<div class="draggable">
<img class="img" width="50%" src="http://www.skrenta.com/images/stackoverflow.jpg">
</div>
<iframe id="phone-iframe" width="100%" height="100%" src="iframe.html" frameborder="0"></iframe>
<script>
$(document).ready(function(){
$('#phone-iframe').load(function () {
$('#phone-iframe').contents().find('.sortable').sortable({
connectWith: ".sortable",
revert: true
});
$( ".draggable" ).draggable({
connectToSortable: $('#phone-iframe').contents().find('.sortable'),
iframeFix: true,
helper: "clone",
revert: "invalid",
zIndex: 2,
opacity: 0.74,
appendTo: 'body',
distance: 15
});
});
});
Iframe code :
<ul class="sortable">
<li>I'm sortable</li>
<li>Me too</li></ul>
It is working but there is a position problem on iframe. It's not working when you drag inside to the iframe (if i change to iframe position to 0px X 0px it works. )
Here is my code : http://tekdogru.com/iframexample/
float
CSS properties