Here is my HTML for 1st Page:
<head>
<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>
Here is my HTML for 2nd Page:
<head>
<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 () {
window.parent.bindDrop();
});
</script></head>
<body>
<div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
</div>
</body>
</html>
Problem Description :
When I load it first time. drag drop works as usual.
On click of button I am assigning iframe source once again. on document load i am rebinding events draggable and droppable. but its not working in IE. it works on chrome.
What is the mistake i am doing and how can i fix this ?
You can refer at : "
http://stackoverflow.com/questions/28625320/drag-drop-issue-with-ie-and-iframe" I have posted it there also.