This jQuery plugin can help you to easily drag element from an iframe to parent html document
How initialize plugin
$('#iframe').dragOutFromIframe({
target:'.image'
});
Settings
target: target inside iframe to drag
document:, element to append cloned target default value is $('body')
draggable:, jQuery draggable options
Default values
document:$('body'), //element to append cloned target
target:'', //target inside iframe to drag
draggable: {
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
containment: "document",
cursor: "move",
helper: "clone",
iframeFix: true,
revert: true,
cursorAt: {top: 122 / 2, left: 122 / 2},
drag: function (e, ui) {
ui.helper.show();
},
stop: function(){
settings.clone.remove();
}
}