在一个页面中包含两个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调试会出错