I'm having an issue with jquery ui drag/drop. I need to drag element into an iframe which contains droppable area inside. When I drag item on the left side and drop to iframe, it didnt work as I expected. That looks like exactly this fiddle:
JS
$('#my-frame').load(function () {
$('.draggable').draggable({
appendTo: 'body',
helper: 'clone',
iframeFix: true,
revert: 'invalid',
connectToSortable: $('#my-frame').contents().find('.sortable'),
cursorAt: { top: 10, left: 0 },
drag: function(event,ui){
console.log(ui.offset);
}
});
$('#my-frame').contents().find('.sortable').sortable({
iframeFix: true,
cursorAt: { top: 0, left: 0 }
});
});
$('.draggable').on('dragstop',autoResize);
function autoResize(){
var newheight;
if(document.getElementById){
newheight=document.getElementById('my-frame').contentWindow.document .body.scrollHeight;
}
newheight=newheight+100;
$('#my-frame').css('height',newheight);
}
Can you help me to fix this? Thanks