<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script>
function bindDrop() {
$("iframe").each(function () {
var iframe = $(this).contents();
iframe.find('#iframe_container').droppable(
{
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
$('#drag').removeClass("ui-draggable-dragging");
$('#drag').draggable({ iframeFix: true, revert: true });
}
$(function () {
bindDrop();
});
function ReloadFrmDoc() {
$('#frameMain').attr('src', 'iframe.htm');
}
</script>
</head>
<body>
<iframe src="iframe.htm" id="frameMain"></iframe>
<div style="width: 20px; height: 20px; background-color: #808080" id="drag">
</div>
<button id="reload" text="Reload" onclick="ReloadFrmDoc();" />
</body>
</html>