i trying drag item parent frame droppable element in iframe. works when dropping item on droppable element in same frame when trying across frames, nothing.
i have tried work around lot of times no success.
here's code parent frame:
<html> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( ) .addclass( "ui-state-highlight" ) .find( "p" ) .html( "dropped!" ); } }); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>drag me target</p> </div> <div id="droppable" class="ui-widget-header"> <p>drop here</p> </div> <iframe src="p1.html" width = "500px" height = "500px"> </iframe> </body> </html> and here's code iframe:
<html> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( ) .addclass( "ui-state-highlight" ) .find( "p" ) .html( "dropped!" ); } }); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>drag me target</p> </div> <div id="droppable" class="ui-widget-header"> <p>drop here</p> </div> </body> </html>
unfortunately, frames separate window objects, won't able drag object 1 dom tree window's dom tree. webpage renders based on current state of window's dom. drag element around, dom signals repaint , webpage re-renders based on style of element (in case of dragging, top , left style properties culprit).
when have 2 frames (or window objects) on page (one inside other in scenario), have 2 separate instances of dom object and, thusly, it's behaviour. dom's don't collaborate when 1 inside other , perform 1 larger dom render together; they're entirely different scopes (including javascript) , it's designed way reason (mostly security can load external websites embedded window/iframe objects).
Comments
Post a Comment