Powrót elementów w ramce iframe jest jeszcze inny

Question

Mar 10, 2013, 09:41 AM

jquery-ui jquery-droppable jquery jquery-ui-draggable iframe

Powrót elementów w ramce iframe jest jeszcze inny

EDYCJA: 1

To jest drag.html (strona główna) -

<!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>

A to jest kod 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>

I wiem, że bez iframe mogę to łatwo osiągnąć, jak to się skończytutaj Ale w moim obecnym projekcie nie mogę wyeliminować elementów iframe. Więc pomóż mi.

Sprawdź wersję demonstracyjnątutaj

Czerwone pole znajduje się w ramce iframe, a jeśli przeciągniesz i upuścisz elementy w środku czerwonego pola, jeśli działa poprawnie. Ale jeśli upuścisz je na dole pudełka, to powróci.

Ponadto, jeśli upuścisz dragbox w pobliżu iframe (tuż nad iframe), również zostanie on pomyślnie usunięty.

Chcę, aby dragbox został upuszczony tylko wtedy, gdy jego wewnątrz czerwonego pola powróci.

Czekto

Podczas korzystania z iframe występuje problem z obszarem, który można usunąć, ale nie udało się znaleźć rozwiązania.

Z góry dziękuję!