jquery 跨iframe拖拽
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){f.css("left",e.pageX+10);f.css("top",e.pageY+10);}$("#show").html(e.pageX+"|"+e.pageY);});$("body").mouseup(function(){$("#fly").hide();});$("#f2").onload=function(){var f1=$("#f1");var f2=$("#f2");var f1_body=$(f1.contentWindow.document.body);var f2_body=$(f2.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")){$(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){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>
页:
[1]