跨iframe拖动

x77624677 2013-12-10 11:00:48

需求：index页面中有个垃圾箱图标,index中同时有个iframe(该iframe是显示数据页面),我想把iframe中数据拖到index页面中的垃圾箱的话，那么删除该数据，开始我使用jquery sortable在index中定义结果没反应，
$(window.frames['maincontent'].document).find("#yqtable").sortable({
items:'tr',//定义被拖动的对象
connectWith: ".delete",//容器外联
cancel: ".cacel",//标有该样式的将无法被拖动
cursor: 'move', //鼠标样式
opacity: 0.8, //拖拽时透明
revert:true,
out:sortableUpdate//拖拽状态
}).disableSelection();
求例子，求大神

...全文

601 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

faklu 2014-03-03

打赏
举报

引用 15 楼 l676331991 的回复:

[quote=引用 14 楼 faklu 的回复:] [quote=引用 12 楼 l676331991 的回复:] 连接在这里这里还是用到了跨iframe的js，利用好dataTransfer，应该可以不需要iframe之间互相调用js的。

XD你的栗子失效了，之前丢收藏夹里，现在看不了了啊。[/quote] 抱歉，duapp被删除了。我把代码贴出来吧，一个index.html,一个iframe.html,但是要注意，html文件必须放到服务器下访问，file协议下无法生效的。 [/quote] 灰常感谢

l676331991 2014-01-20

打赏
举报

引用 14 楼 faklu 的回复:

[quote=引用 12 楼 l676331991 的回复:] 连接在这里这里还是用到了跨iframe的js，利用好dataTransfer，应该可以不需要iframe之间互相调用js的。

XD你的栗子失效了，之前丢收藏夹里，现在看不了了啊。[/quote] 抱歉，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>

faklu 2014-01-20

打赏
举报

引用 12 楼 l676331991 的回复:

连接在这里这里还是用到了跨iframe的js，利用好dataTransfer，应该可以不需要iframe之间互相调用js的。

XD你的栗子失效了，之前丢收藏夹里，现在看不了了啊。

x77624677 2013-12-10

打赏
举报

引用 10 楼 l676331991 的回复:

骚等，给你煮个栗子。。。

感谢

l676331991 2013-12-10

打赏
举报

骚等，给你煮个栗子。。。

x77624677 2013-12-10

打赏
举报

引用 7 楼 l676331991 的回复:

[quote=引用 6 楼 x77624677 的回复:] 这和jquery draggable 这个没区别吧？

jquery的draggable就是mousedown + mousemove + mouseup组合起来的。LZ没有仔细看我的回帖。

[/quote] 大神问下现在html5 用的话支持IE到多少版本了，不然不能用html5啊。。。。

x77624677 2013-12-10

打赏
举报

引用 6 楼 x77624677 的回复:

这和jquery draggable 这个没区别吧？

一直没注意看jquery那个是mousedown + mousemove + mouseup 好吧我错了

l676331991 2013-12-10

打赏
举报

引用 6 楼 x77624677 的回复:

这和jquery draggable 这个没区别吧？

jquery的draggable就是mousedown + mousemove + mouseup组合起来的。LZ没有仔细看我的回帖。

x77624677 2013-12-10

打赏
举报

这和jquery draggable 这个没区别吧？

l676331991 2013-12-10

打赏
举报

这是老式的mousedown + mousemove + mouseup模拟的drag事件，可以看到，事件范围只能是client区域。拖拽的小方块是无论如何出不了页面区域的。

这个是HTML5的drag and drop API，看图形可以拖动到页面之外，可以和系统进行数据交互，跨iframe交互不在话下。

x77624677 2013-12-10

打赏
举报

l676331991 这个方法刚我试过在内部绑定这事件的话，主要是拖不出iframe

x77624677 2013-12-10

打赏
举报

引用 2 楼 l676331991 的回复:

好霸气的需求。如果非要跨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 2013-12-10

打赏
举报

好霸气的需求。如果非要跨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事件模拟不能完成的。

x77624677 2013-12-10