Coloca los elementos dentro del iframe solo para revertir
EDITAR: 1
Esto es 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>
Y este es el código 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>
Y sé que sin iframe puedo lograrlo fácilmente como se hace una vezaquí Pero para mi proyecto actual no puedo eliminar los iframes. Entonces, por favor ayúdame.
Mira la demoaquí
El cuadro rojo está dentro de un iframe y si arrastra y suelta elementos justo dentro del cuadro rojo si funciona bien. Pero si los coloca en la parte inferior del cuadro, vuelve a aparecer.
Además, si coloca la caja de arrastre cerca del iframe (justo encima de iframe), también se eliminará con éxito.
Lo que quiero es que la caja de arrastre solo se descarte si está dentro del cuadro rojo, de lo contrario, se revertirá.
Comprobaresta
Cuando se usa el iframe, hay un problema con el área que se puede soltar pero no se puede encontrar la solución.
¡Gracias por adelantado!