EDIT: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 上方），它也会成功放置。
我想要的是，只有当拖动框位于红色框内时才应将其删除，否则应恢复原样。
Check this
使用 iframe 时，可放置区域出现问题，但找不到解决方案。
提前致谢！
