#9301 open bug ()

Opened May 15, 2013 08:38AM UTC

Last modified May 17, 2013 02:09AM UTC

Droppable: iframeFix option does not account for scrollable <iframe>s

Reported by: CodeMan Owned by: CodeMan
Priority: minor Milestone: none
Component: ui.droppable Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

When you have a draggable outside an iFrame and a droppable inside an iFrame, when using the iframeFix option it works. But when you introduce an scrollable div around the iframe the coordinates of the droppable are not updated and remain at the original position as it was before it was scrolled.

e.g. the top left in this example

main.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js""></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script>
        $(function () {
            $("iframe").load(function () {
                var iframe = $(this).contents();
                iframe.find('#iframe_container').droppable(
                {
					iframeFix: true,
                    drop: function (event, ui) { alert('dropped'); }
                });
            });
            $('#drag').draggable({iframeFix: true});
        });
    </script>
</head>
<body>
	<div style="width:400px; height:200px; overflow:auto">
    <iframe src="iframe.html" style="width:400px; height:400px;"></iframe>
	</div>
    <div  style="width:20px; height:20px; background-color: #808080" id="drag"></div>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
    </div>
</body>
</html>
Attachments (0)
Change History (3)

Changed May 16, 2013 01:16AM UTC by tj.vantoll comment:1

owner: → CodeMan
status: new → pending

Hi CodeMan,

Thanks for taking the time to contribute to the jQuery UI project. I'm not seeing the issue you're describing: http://jsfiddle.net/tj_vantoll/kY7FA/.

Are you seeing this issue in that test case?

Changed May 16, 2013 09:58AM UTC by CodeMan comment:2

_comment0: Thanks for the jsfiddle. \ \ I'm seeing the issue with that test case. \ \ What you have to do is scroll down in the div so the blue square is not in view. Then drag the grey square to the top left. The drop event is still firing (making the alert box) even though the droppable is not there. \ \ I've tried it in Firefox, Chrome & IE. → 1368698409519181
status: pending → new

Thanks for the jsfiddle.

I'm seeing the issue with that test case in jsfiddle.

What you have to do is scroll down in the div so the blue square is not in view. Then drag the grey square to the top left. The drop event is still firing (making the alert box) even though the droppable is not there.

I've tried it in Firefox, Chrome & IE.

Changed May 17, 2013 02:09AM UTC by tj.vantoll comment:3

status: new → open
summary: Droppable inside iframe with scrollable div → Droppable: iframeFix option does not account for scrollable <iframe>s