#11204 closed bug (duplicate)
Draggable Droppable Issue with IE and iframe
Reported by: | gaurav | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.droppable | Version: | 1.11.3 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
To reproduce my issue: [1] create page 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();">ReLoad</button> </body> </html>
[2] Here is my HTML for 2nd Page: give name iframe.htm
<!-- Code for HTML2 : iframe.htm --> <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>
[3] Jquery Files : Latest [3] Open Page1 in IE browser [4] Now try to drag and drop. After Drop you will get alert that says "dropped" [5] Press button ReLoad [6] Now try to drag it stops working on second randering. [7] Sample is working with Chrome
Thanks Please help.
Change History (2)
comment:1 Changed 8 years ago by
Resolution: | → duplicate |
---|---|
Status: | new → closed |
comment:2 Changed 8 years ago by
hello scott.gonzalez,
I have added following to my jquery-ui js.
handle iframe scrolling
m[i].offset.top -= m[i].element.parents().find("html,body").scrollTop(); m[i].offset.left -= m[i].element.parents().find("html,body").scrollLeft();
iframe positioning if( this.current.options.iframeOffset ) {
m[i].offset.top += this.current.options.iframeOffset.top; m[i].offset.left += this.current.options.iframeOffset.left;
}
as mentioned at : http://bugs.jqueryui.com/ticket/7925
and also I have tried following attributes with my draggable element just like
$( "div" ).draggable({
iframeFix: true, appendTo: 'body', containment: 'window', helper: "clone", iframeOffset: $("#frame").offset()
});
I am not able to replicate this with JSFiddler.
Its my humble request to you Please try it on your local machine and IE 10. When I click on button and load child document.. on 2nd time rendering drop event not getting called. Where as with Chrome its working as expected.
Thanks Gaurav Teli
Duplicate of #7925.