拖拽一个iframe中的div 在另一个iframe页面中展示

拖拽一个iframe中的div 在另一个iframe页面中显示
在一个页面中包含两个iframe iframe包含的页面中有div元素 实现拖动div在另外一个iframe中实现相同的拖拽效果
event.html主页面
有几个地方需要注意：1.要在iframe包含的页面中设置div的绝对位置position:absolute;left:20px;top:20px;
2.js在不同页面调用 这个可以上网搜 比如调用iframe中的dom contentWindow.document
  子页面调用父页面 parent.document.getElementById("parentNodeName");
3.js 事件的处理onmousedown 鼠标按下时事件处理 onmouseup鼠标离开时触发的事件，要在onmousedown事件处理之下触发
用table做了一个布局

<h3>event 动态实现鼠标的拖拽</h3>

<table width="800px" height="400px" border="1" style="border-color:red" align="center">
	<tr>
		<td>
			<iframe src="a.html" id="iframe1" style="width:400px;height:400px;"></iframe>
		</td>
		<td>
			<iframe src="b.html" id="iframe2" style="width:400px;height:400px"></iframe>
		</td>
	</tr>
</table> 

//============a.html

<script type="text/javascript" src="dragging.js">
<div style="width:50px;height:50px;background-color:yellow;cursor:help;position:absolute;left:20px;top:20px" id="div1" onmousedown="divDragging(this,event,true)"></div>

//=============b.html
<script type="text/javascript" src="dragging.js">
  <div style="width:50px;height:50px;background-color:blue;position:absolute;left:20px;top:20px;" id="div2" onmousedown="divDragging(this,event,true)">

//================dragging.js

//obj 当前对象 2.指定event对象 主要是为了兼容ff，true指定是否只能在父级元素中拖拽
function divDragging(obj, e, limit){
		//alert(parent.document.getElementById('iframe').src);
        //alert(e.srcElement.id);
		if(!e) e=window.event;
        var x=parseInt(obj.style.left);
        var y=parseInt(obj.style.top);
        //clientX clientY事件发生时 鼠标的横纵坐标，他们的值是相对于包容窗口的左上角生成的
        var x_=e.clientX-x;
        var y_=e.clientY-y;
        
        if(document.addEventListener){//ff浏览器 注册事件监听器
            document.addEventListener('mousemove', divmove, true);//两个参数 1。事件的类型 2.事件处理的函数
            document.addEventListener('mouseup', divup, true);
        } else if(document.attachEvent){//ie
            document.attachEvent('onmousemove', divmove);
            document.attachEvent('onmouseup', divup);
        }
        
        divstop(e);    
        divabort(e);
		//alert(e.srcElement.id);
        
        function divmove(e){
            //var evt;
            if(!e)e=window.event;
            
            if(limit){
                var op=obj.parentNode;
                var opX=parseInt(op.style.left);
                var opY=parseInt(op.style.top);
                //offsetWidth相对于原窗口的宽度
                if((e.clientX-x_)<0) return false;
                else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;
                
                if(e.clientY-y_<0) return false;
                else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
                //status=e.clientY-y_;
            }
            
            obj.style.left=e.clientX-x_+'px';
            obj.style.top=e.clientY-y_+'px';
            getResult(e.srcElement.id,e.clientX-x_,e.clientY-y_);
			//getInfo();
            divstop(e);
        }
        function divup(e){
            //var evt;
            if(!e)e=window.event;
            
            if(document.removeEventListener){
                document.removeEventListener('mousemove', divmove, true);
                document.removeEventListener('mouseup', divup, true);
            } else if(document.detachEvent){
                document.detachEvent('onmousemove', divmove);
                document.detachEvent('onmouseup', divup);
            }
            
            divstop(e);
        } 
 
        function divstop(e){
            if(e.stopPropagation) return e.stopPropagation();
            else return e.cancelBubble=true;            
        } 
		//returnValue：一个布尔值属性，设置为false的时候可以组织浏览器执行默认的事件动作，相当于<a href=”#” onclick=”ProcessMethod();return false;” />。

		function divabort(e){
            if(e.preventDefault) return e.preventDefault();//
            else return e.returnValue=false;
        }
		
    }
	function getResult(div,a,b){
		//alert(div+" --"+a+"---"+b);
		var iframeObj1=parent.document.getElementById('iframe1').contentWindow.document;
		var iframeObj2=parent.document.getElementById('iframe2').contentWindow.document;
		//this div对象 指定event对象 主要是为了兼容ff，true 指定是否只能能在父级元素中拖拽
		if('div1'==div.toString()){
			//iframeObj2.getElementById('div2').Class='div1'+','+a+','+b;
			iframeObj2.getElementById('div2').style.left=a+'px';
			iframeObj2.getElementById('div2').style.top=b+'px';
			//alert(iframeObj2.getElementById('div2').id);

		}
		//alert(div.toString());
		if('div2'==div.toString()){
			
			//iframeObj2.getElementById('div2').Class='div1'+','+a+','+b;
			iframeObj1.getElementById('div1').style.left=a+'px';
			iframeObj1.getElementById('div1').style.top=b+'px';
			//alert(iframeObj2.getElementById('div2').id);

		}
		
	}

//小注：chrome浏览器不支持获取iframe节的dom的getElementById方法 chrome调试会出错