I have droppable
elements in main frame, and sortable
inside iframe app. What I need is to connect them - to be able to drag items to iframe's sortable
There is what I've done: http://jsfiddle.net/w9L3eorx/1/
Inside iframe
I have
<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>
<script>
$('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
});
</script>
The main frame
<div class='items'>
<div class="one">One</div>
<div class="two">Two</div>
</div>
<iframe src="frame.html" id="frame" width="800" height="800"></iframe>
<script>
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable: $('.content', $("#frame")[0].contentDocument)
});
</script>
I see working example http://ma.rkusa.st/zepto-dnd/example.html. But it is built without jquery and is not working on IE9