jQuery ui draggable drop into an iframe -
i trying utilize jquery ui draggable , droppable , works fine if seek on same page. when seek drag element , drop droppable area defined in iframe doesn't work perfectly. works not on whole droppable area in iframe , droppable outside frame.
here 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 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>
you seek like:
$('#draggables div', parent).draggable(); there few different answers here:
http://jqfaq.com/how-to-implement-drag-and-drop-between-iframes/
jquery , iframes , weird positioning: there workaround?
good luck!
jquery iframe drag-and-drop draggable droppable
No comments:
Post a Comment