Question

编辑：1

这是drag.html（主页） -

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

这是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>

我知道如果没有iframe我可以轻松实现here 但对于我目前的项目，我无法消除iframe。所以，请帮助我。

查看演示here

红色框位于iframe内部，如果您将元素拖放到红色框内，如果工作正常。但是如果你将它们放在框的底部则会恢复原状。

此外，如果您将拖框放在iframe（iframe上方）附近，也会成功删除。

我想要的是，只有当红盒子里面的红盒子还原后，它才会被丢弃。

检查this

使用iframe时，可放置区域存在问题但无法找到解决方案。

提前致谢！

删除iframe中的元素，否则还原

0 个答案: