Opened 6 years ago

Last modified 6 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 6 years ago by tj.vantoll

Owner: set to CodeMan
Status: newpending

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 6 years ago by CodeMan

Status: pendingnew

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 6 years ago by CodeMan (previous) (diff)

comment:3 Changed 6 years ago by tj.vantoll

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