EDIT: 1
This is drag.html (main page) -
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Sortable - Handle empty lists</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> <style> .drag {padding:10px;border:1px solid blue;margin:20px;} </style> <script> $(function() { $( ".drag" ).draggable({ helper: "clone",iframeFix: true, revert : 'invalid',cursor: "move"}); $('#frame').load(function(){ $('#frame').contents().find('#sortable3').droppable({ accept: ".drag", drop: function( event, ui ) { var html = '<div class="droptrue">'+ ui.draggable.html() + '</div>'; </script> </head> <body> <div class="drag" style="display:inline"> Drag 1 </div> <div class="drag " style="display:inline"> Drag 2 </div> <div class="drag " style="display:inline"> Drag 3 </div> <div class="drag " style="display:inline"> Drag 4 </div> <br/><br/><br/><br/><br/> <iframe id="frame" src="iframe.html" width="700" height="400"></iframe> <br style="clear: both;" /> </body> </html>
And this is the iframe code -
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Sortable - Handle empty lists</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> <style> .droptrue {padding:5px;margin:5px 0px;border:1px solid green;} </style> </head> <script> $(function() { $( "#sortable3" ).sortable({ placeholder: "ui-state-highlight" }); $( ".droptrue" ).disableSelection(); }); </script> <body> <div id="sortable3" style="width:500px;height:300px;border:1px solid red;"> </div> </body> </html>
And I know that without an iframe, I can easily do this, as is done in here. But for my current project, I cannot exclude iframes. So please help me.
Check out the demo here.
The red frame is inside the iframe, and if you drag items only in the red box, if it works fine. But if you drop them at the bottom of the window, it will go back.
In addition, if you remove the dragbox next to the iframe (just above the iframe), it will also be deleted successfully.
What I want is that the dragbox should be discarded only if it is still returned inside the red box.
Mark this
When using iframe, there is a problem with the droppable scope but cannot find a solution.
Thanks in advance!
source share