Jquery 仅在iframe中放置元素，否则将恢复_Jquery_Jquery Ui_Iframe_Jquery Ui Draggable_Jquery Droppable

Jquery 仅在iframe中放置元素，否则将恢复

jquery jquery-ui iframe

Jquery 仅在iframe中放置元素，否则将恢复,jquery,jquery-ui,iframe,jquery-ui-draggable,jquery-droppable,Jquery,Jquery Ui,Iframe,Jquery Ui Draggable,Jquery Droppable,编辑：1 这是drag.html（主页）—— jQuery UI可排序-处理空列表 .拖动{填充：10px；边框：1px纯蓝色；边距：20px；} $（函数（）{ $（“.drag”）.draggable（{helper:“clone”，iframeFix:true，revert:“invalid”，cursor:“move”}）； $（'#frame'）。加载（函数（）{ $（'#frame'）.contents（）.find（'#sortable3'）.dropable({ 接受：“.dr

编辑：1

这是drag.html（主页）——


jQuery UI可排序-处理空列表
.拖动{填充：10px；边框：1px纯蓝色；边距：20px；}
$（函数（）{
$（“.drag”）.draggable（{helper:“clone”，iframeFix:true，revert:“invalid”，cursor:“move”}）；
$（'#frame'）。加载（函数（）{
$（'#frame'）.contents（）.find（'#sortable3'）.dropable({
接受：“.drag”，
drop：函数（事件、用户界面）{
var html=''+ui.draggable.html（）+''；
//警报（html）；
$（this.append（html）；
}
});
});
});
拖动1
拖动2
拖动3
拖动4

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


jQuery UI可排序-处理空列表
.droptrue{填充：5px；边距：5px 0px；边框：1px纯绿色；}
$（函数（）{
$（“#可排序3”）。可排序({
占位符：“ui状态突出显示”
});
$（“.droptrue”）.disableSelection（）；
});

我知道如果没有iframe，我可以很容易地做到这一点但是对于我当前的项目，我不能消除iframe。所以，请帮帮我

查看演示

红色框位于iframe内，如果将元素拖放到红色框内，则效果良好。但如果将元素拖放到框底部，则会恢复原状

此外，如果您将dragbox放置在iframe附近（就在iframe上方），它也会被成功放置

我想要的是，只有当dragbox在红色框中时，它才应该被丢弃，否则它将返回

检查

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

提前谢谢

你必须提供一些代码和html，并说明你使用Dharmesh的控件。我已经编辑了这个问题，请检查！第一个问题，为什么要使用jquery的最新版本，然后使用jquery ui的v1.1“”，如果您在网站上查看，这是他们的最新版本。也许先尝试链接到最新版本，看看这是否解决了您的问题。除非您计划调试源代码，否则您还必须链接到脚本的缩小版本。我已经从jquery ui站点本身复制了源代码。。。检查页面底部！哦，糟糕，我错过了那本书。我现在注意到的一件事是，在使用html时，如果您将此“更改为”并在iframe内向下滚动，然后将一个框拖动到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>