jquery - Droppable inside iframe with scrollable div -
when have draggable outside iframe , droppable inside iframe, when using iframefix option works. when introduce scrollable div around iframe coordinates of droppable not updated , remain @ original position before scrolled.
e.g. top left in 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>
does know why might happening or know workaround issue?
Comments
Post a Comment