jquery 跨iframe拖拽

Posted on 2009-09-02 20:43 linFen 阅读(5608) 评论(0) 编辑收藏举报

iframe.html 主iframe页

left.html 左侧引用页

right.html 右侧引用页

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

http://kjah.javaeye.com

要点:

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

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

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

iframe.html

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.javaeye.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].onload=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%">
<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>

<!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.javaeye.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].onload=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.javaeye.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

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>

<!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

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>

刷新页面返回顶部

luluping

公告

jquery 跨iframe拖拽