jquery 跨iframe拖拽

最新推荐文章于 2022-12-02 10:39:01 发布

kjah_1

最新推荐文章于 2022-12-02 10:39:01 发布

阅读量289

点赞数

分类专栏： jquery 文章标签： jQuery CSS HTML F# JavaScript ViewUI

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

iframe.html 主iframe页

left.html 左侧引用页

right.html 右侧引用页

引用页中没有js代码，所有js代码在iframe.html中。

http://kjah.iteye.com

要点:

1.拖动层在iframe中拖动时需要另行计算位置（iframe位置+鼠标位置=当前窗口相对位置）。

2.本例中拖动层不在鼠标下而在+10px的位置，是为了使iframe能有效监听到鼠标事件，如在鼠标下事件不会传到iframe中，需要进行位置计算比较麻烦。

3.right页面取消选取动作（onselectstart），防止拖动时事件监听仍在right页面中（在ff中只要在mousedown里preventDefault()即取消选取动作）

iframe.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Iframe content drag and drop </TITLE>
  <SCRIPT LANGUAGE="JavaScript" src="jquery-1.3.2.js"></SCRIPT>
  <SCRIPT LANGUAGE="JavaScript">
  <!--//http://kjah.iteye.com
	$(function(){
			$("body").append("<div style='position:absolute' id='fly'></div>");
			$("body").mousemove(function(e){
				var f=$("#fly:visible");
					if(f[0]){
						f.css("left",e.pageX+10);
						f.css("top",e.pageY+10);
					}
				$("#show").html(e.pageX+"|"+e.pageY);
			});
			$("body").mouseup(function(){$("#fly").hide();});
			
			$("#f2")[0].οnlοad=function(){
				var f1=$("#f1");
				var f2=$("#f2");
				var f1_body=$(f1[0].contentWindow.document.body);
				var f2_body=$(f2[0].contentWindow.document.body);

				f1_body.mousemove(function(e){
					var f=$("#fly:visible");
					f.css("left",e.pageX+f1.offset().left+10);
					f.css("top",e.pageY+f1.offset().top+10);
					$(this).find("#show").html(e.pageX+"|"+e.pageY);
				}).mouseup(function(){$("#fly").hide();});

				f1_body.find(".drop_area").mouseup(function(e){
					$(this).append($("#fly:visible").html());//跨iframe不能用clone的对象append,可能克隆的对象是在外层document下保存
					$("#fly:visible div").empty();
				}).hover(function(){
					if($("#fly:visible")[0]){
						$(this).css("background-color","#ddd");
					}
				},function(){
					$(this).css("background-color","#ccc");
				});

				$("#test").mouseup(function(e){
					$(this).append($("#fly:visible div").clone());//非跨iframe
					$("#fly:visible div").empty();
				});

				f2_body.mousemove(function(e){
					$(this).find("#show").html(e.pageX+"|"+e.pageY);
					var f=$("#fly:visible");
					if(f[0]){
						f.css("left",e.pageX+f2.offset().left+10);
						f.css("top",e.pageY+f2.offset().top+10);
					}
				}).mouseup(function(){$("#fly").hide();}).bind("selectstart",function(e){e.preventDefault();});

				f2_body.find(".div1").mousedown(function(e){
					e.preventDefault();
					$("#fly").empty().append($(this).clone()).css({left:(f2.offset().left+e.pageX+10)+"px",top:(f2.offset().top+e.pageY+10)+"px"}).show();
				});				
			};
	});

  //-->
  </SCRIPT>
 </HEAD>

 <BODY style="height:100%">
  <!--  http://kjah.iteye.com -->
  <iframe src="left.html" style="width:50%;height:50%" id="f1" ></iframe>
  <iframe src="right.html" style="width:200px;height:200px;margin:50px" id="f2"></iframe>
  <span id="show"></span>
  <div style="width:300px;height:200px;border:1px solid red" id="test"></div>
 </BODY>
</HTML>

left.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <style>
.drop_area{
	border:1px solid gray;background-color:#ccc;width:150px;height:150px;margin:5px;float:left;overflow:auto;
}
.drop_area div{
	float:left;margin:3px
}
</style></HEAD>

 <BODY style="height:100%">
<div class="drop_area"></div>
<div class="drop_area"></div>
<span id="show"></span>
 </BODY>
</HTML>

right.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
.div1{
	margin:3px;
}
div{float:left}
  </style>
 </HEAD>

 <BODY style="height:100%" >
 
<div style="border:1px solid red;width:50px;height:50px" class="div1">aaa</div>
<div style="border:1px solid green;width:50px;height:50px" class="div1">bbb</div>
<div style="border:1px solid blue;width:50px;height:50px" class="div1">ccc</div>
<span id="show"></span>
 </BODY>
</HTML>

kjah_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 跨iframe拖拽

iframe.html 主iframe页left.html 左侧引用页right.html 右侧引用页引用页中没有js代码，所有js代码在iframe.html中。http://kjah.iteye.com要点:1.拖动层在iframe中拖动时需要另行计算位置（iframe位置+鼠标位置=当前窗口相对位置）。2.本例中拖动层不在鼠标下而在+10px的位...
复制链接

扫一扫

专栏目录