Drop elements inside iframe only else revert

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!