Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#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 6 years ago by Scott González

Resolution: → duplicate
Status: new → closed

Duplicate of #7925.

comment:2 Changed 6 years ago by gaurav

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

Note: See TracTickets for help on using tickets.