4

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>';
            //alert(html);
            $(this).append(html);   
        }
    });

});


});
</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 without iframe I can achieve that easily as done over here But for my current project I cannot eliminate iframes. So, please help me.

Check the demo here

The red box is inside an iframe and if you drag and drop elements just inside the red box if works fine.But if you drop them at the bottom of the box it reverts back.

Also, if you drop the dragbox nearby the iframe(just above iframe) also it gets successfully dropped.

What I want is that the dragbox should be dropped only if its inside the red box else revert back.

Check this

When using iframe there is problem with the droppable area but couldnt find the solution.

Thanks in advance!

Dharmesh
  • 1,039
  • 1
  • 12
  • 17
  • You going to have to provide some code & html and say what controls you using Dharmesh. – jjay225 Mar 12 '13 at 10:15
  • I have edited the question, please check ! – Dharmesh Mar 12 '13 at 11:15
  • First question, why are you using the latest version of jquery but then v1.1 of jquery ui, "http://code.jquery.com/ui/1.9.2/jquery-ui.min.js" , thats their latest version if you look on the site. Maybe try linking to the latest version first to see if that solves your problem. You must also link to their minified versions of the scripts unless you are planning on debugging the source. – jjay225 Mar 12 '13 at 11:22
  • I have copied the source from jquery ui site itself...http://jqueryui.com/download/ check the bottom of the page ! – Dharmesh Mar 12 '13 at 11:34
  • Oh my bad, I miss read it that. One thing I noticed now while fooling around with the html is if you change this "" to "" and scroll down inside the iframe then drag a box to the edge of the iframe it works. – jjay225 Mar 12 '13 at 11:52
  • Have you tried playing around with the "tolerance" property? Sorry dude, I don't know much of these draggable widgets and try stay away from iframes. – jjay225 Mar 12 '13 at 12:09

0 Answers0