Soltar elementos dentro do iframe somente reverter
EDIT: 1
Isso é drag.html (página principal) -
<!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>
E este é o código do iframe -
<!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>
E eu sei que sem iframe eu posso conseguir isso facilmente como feitoAqui Mas para o meu projeto atual não posso eliminar iframes. Então, por favor me ajude.
Confira a demonstraçãoAqui
A caixa vermelha está dentro de um iframe e se você arrastar e soltar elementos dentro da caixa vermelha, se funcionar bem. Mas se você soltá-los na parte inferior da caixa, ela será revertida.
Além disso, se você soltar a caixa de arrastar nas proximidades do iframe (logo acima do iframe), ele também será removido com sucesso.
O que eu quero é que a caixa de arrastar seja descartada somente se ela estiver dentro da caixa vermelha ou se voltar.
Verificaisto
Ao usar o iframe, há um problema com a área que pode ser solta, mas não conseguimos encontrar a solução.
Desde já, obrigado!