#11204 closed bug (duplicate)

Opened February 24, 2015 01:13PM UTC

Closed February 24, 2015 01:38PM UTC

Last modified February 24, 2015 06:14PM UTC

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.

Attachments (0)

Change History (2)

Changed February 24, 2015 01:38PM UTC by scottgonzalez comment:1

resolution:	→ duplicate
status:	new → closed

Duplicate of #7925.

Changed February 24, 2015 06:14PM UTC by gaurav comment:2

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.