I am trying to use jQuery ui draggable and droppable, and it works fine if I try on the same page. But when I try to drag an element and move to the drop area defined in the iframe, then it does not work fine. It works, but not on the entire droppable area in the iframe, and is also inaccessible outside the frame.
Here is what i did
My main page: Home.html
<!DOCTYPE html> <html><head> <title>jQuery UI Draggable</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet"> <script type="text/javascript"> $(function () { $("#FirstDiv").draggable({ revert: "invalid",iframeFix: true }); $("#SecondDiv").draggable({ revert: "invalid" }); $("#frame").load(function () { var $this = $(this); var contents = $this.contents(); contents.find('.DroppableDiv').droppable({ drop: function (event, ui) { alert('dropped'); } }); }); }); </script> </head> <body style="cursor: auto;" > <div class="demo"> <div id="mainDiv" style="background-color: #FAE6B6; height:200px"> <div id="FirstDiv" style=" border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px">First Div</div> <div id="SecondDiv" style=" border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px">Second Div</div> </div> </div> <iframe id="frame" src="test.html" style="width: 800px; height: 400px"></iframe> </body></html>
And here is my iframe content test.html
<!DOCTYPE html> <html> <head> <title>jQuery UI Draggable - inner html</title> <style> .DroppableDiv { background-color:red; height: 500px; width: 500px; } </style> </head> <body style="cursor: auto;"> <div class="DroppableDiv"> </div> </body> </html>
source share