Opened 10 years ago

Last modified 10 years ago

#9301 open bug

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>

Change History (3)

comment:1 Changed 10 years ago by tj.vantoll

Owner: set to 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?

comment:2 Changed 10 years ago by CodeMan

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.

Last edited 10 years ago by CodeMan (previous) (diff)

comment:3 Changed 10 years ago by tj.vantoll

Status: new → open
Summary: Droppable inside iframe with scrollable div → Droppable: iframeFix option does not account for scrollable <iframe>s
Note: See TracTickets for help on using tickets.