Wenn Sie Elemente in iframe ablegen, wird nur andernfalls zurückgesetzt

Question

Mar 10, 2013, 09:41 AM

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

Wenn Sie Elemente in iframe ablegen, wird nur andernfalls zurückgesetzt

EDIT: 1

Dies ist drag.html (Hauptseite) -

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

Und das ist der 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>

Und ich weiß, ohne iframe kann ich das ganz einfach erreichenHier Aber für mein aktuelles Projekt kann ich keine iframes entfernen. Also, bitte hilf mir.

Überprüfen Sie die DemoHier

Das rote Feld befindet sich in einem Iframe. Wenn Sie Elemente in das rote Feld ziehen und dort ablegen, funktioniert dies einwandfrei. Wenn Sie sie jedoch am unteren Rand des Felds ablegen, wird es zurückgesetzt.

Wenn Sie die Dragbox in der Nähe des Iframes (direkt über Iframe) ablegen, wird sie ebenfalls erfolgreich gelöscht.

Ich möchte, dass die Dragbox nur dann abgelegt wird, wenn sie sich innerhalb der roten Box befindet.

Prüfendiese

Bei Verwendung von iframe liegt ein Problem mit dem ablegbaren Bereich vor, es konnte jedoch keine Lösung gefunden werden.

Danke im Voraus!