好霸气的需求。如果非要跨iframe拖动，那么非HTML5中的drag and drop API（以下简称dnd API）莫属了。dnd API不仅可以跨iframe，甚至是跨window，跨Client App的，因为这个拖拽API是system level的。这个拖拽和普通的mousedown + mousemove + mouseup模拟的不同，dnd API可以处理好比你从一个文件夹拖拽一个文件到另一个文件夹的这种事件。缺点是HTML5的浏览器才支持。在iframe内部的item上绑定dragstart事件，在事件的data域中放入需要的数据比如item的序号。在index页面的垃圾箱上监听dragenter和dragover事件，在ondrop事件中取出数据，通知iframe页面进行删除处理。这里是demo 可以看到，这里拖拽产生的跟随图像，可以超出浏览器范围，因此跨iframe交互是完全可行的，这是普通的mouse事件模拟不能完成的。
l676331991 这个方法 刚我试过 在内部绑定这事件的话，主要是拖不出iframe
这是老式的mousedown + mousemove + mouseup模拟的drag事件，可以看到，事件范围只能是client区域。拖拽的小方块是无论如何出不了页面区域的。这个是HTML5的drag and drop API，看图形可以拖动到页面之外，可以和系统进行数据交互，跨iframe交互不在话下。
可以看到，这里拖拽产生的跟随图像，可以超出浏览器范围，因此跨iframe交互是完全可行的，这是普通的mouse事件模拟不能完成的。
jquery的draggable就是mousedown + mousemove + mouseup组合起来的。LZ没有仔细看我的回帖。
jquery的draggable就是mousedown + mousemove + mouseup组合起来的。LZ没有仔细看我的回帖。 大神问下 现在html5 用的话 支持IE到多少版本了，不然不能用html5啊。
XD你的栗子失效了，之前丢收藏夹里，现在看不了了啊。抱歉，duapp被删除了。我把代码贴出来吧，一个index.html,一个iframe.html,但是要注意，html文件必须放到服务器下访问，file协议下无法生效的。index.html<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.trash{
padding: 10px;
height: 100px;
background: #BCDAFA;
border: 2px solid #8C96FF;
font-size: 60px;
line-height: 100px;
}
.trash.hover{
background: #FFFFAB;
border: 2px dashed red;
color: red;
}
#iframe{width:100%;height:450px;}
</style>
</head>
<body>
<div id="trash" class="trash">我是垃圾箱啦啦啦</div>
<iframe src="iframe.html" frameborder="0" id="iframe"></iframe>
<script type="text/javascript">
$(function(){
iframeWindow = $('#iframe')[0].contentWindow; $("#trash").on("dragenter",function(ev){
if(iframeWindow.isCrossIFrameDragging) {
$(ev.target).addClass("hover").text("别犹豫了赶紧扔了吧");
}
})
.on('dragleave', function(ev) {
if(iframeWindow.isCrossIFrameDragging) {
$(ev.target).removeClass('hover').text("我是垃圾箱啦啦啦");
}
})
.on("dragover",function(ev){
if(iframeWindow.isCrossIFrameDragging) {
ev.preventDefault();
ev.originalEvent.dataTransfer.dropEffect = 'move';
}
})
.on("drop",function(ev){
var df = ev.originalEvent.dataTransfer;
var data = df.getData("Text");
if(iframeWindow.isCrossIFrameDragging) {
var id = data.match(/^cross_iframe_drag_([0-9]+)$/)[1];
$(ev.target).removeClass('hover').text("丢掉了["+id+"],好样的,继续！");
iframeWindow.removeDraggingItem();
}
});
});
</script>
</body>
</html>iframe.html<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
body{background: #C2FFB3;}
.item-list{
list-style: none;
padding:0;
}
.item-list li{
line-height: 50px;
width:50px;
background: #FFDECF;
text-align: center;
margin-top: 10px;
border: 2px solid #525252;
cursor: pointer;
}
</style>
</head>
<body>
<span>这里是iframe内部啦，拖拽一下试试看</span>
<ul class="item-list" id="items">
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
<li draggable="true">5</li>
<li draggable="true">6</li>
</ul>
<script>
$(function(){
$("#items").find("li").on("dragstart",function(ev){
var dt = ev.originalEvent.dataTransfer;
dt.setData('Text','cross_iframe_drag_'+$(this).text());
dt.effectAllowed = 'move';
window.isCrossIFrameDragging = true;
window.draggingItem = this;
}).on("dragend",function(ev){
window.isCrossIFrameDragging = false;
}); window.removeDraggingItem = function(){
$(window.draggingItem).animate({height:0,opacity:0},1000,function(){
$(this).remove();
});
window.draggingItem = null;
};
});
</script>
</body>
</html>
XD你的栗子失效了，之前丢收藏夹里，现在看不了了啊。抱歉，duapp被删除了。我把代码贴出来吧，一个index.html,一个iframe.html,但是要注意，html文件必须放到服务器下访问，file协议下无法生效的。
灰常感谢