iframe移动的问题

描述:  在iframe src页面中的一个元素mousedown事件触发iframe开始随鼠标移动而移动，鼠标释放停止随鼠标移动

解决方案 »

  1.   

    把iframe 放入一个div ,让div 移动就可以了撒
      

  2.   

    拖动div 的代码
    <html>
    <body>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <div id="img" style="position:absolute;width:200; height: 151"><img src="1.jpg" border="0"></div>
    <script LANGUAGE="JavaScript">
    var xPos = 20;
    var yPos = 10;
    img.style.left= xPos;
    img.style.top = yPos;
    var step = 1;
    var delay = 30; 
    var width,height,Hoffset,Woffset;
    var y = 1;
    var x = 1;
    var interval;
    img.visibility = "visible";
    function changePos() 
    {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
      Hoffset = img.offsetHeight;
      Woffset = img.offsetWidth;
      if (y) 
      {
        yPos = yPos + step;
      }
      else 
      {
        yPos = yPos - step;
      }
      if (yPos < 200) 
      {
        y = 1;
        yPos = 200;
      }
      if (yPos >= (height - Hoffset - 200)) 
      {
        y = 0;
        yPos = (height - Hoffset-200);
      }
      if (x) 
      {
        xPos = xPos + step;
      }
      else 
      {
        xPos = xPos - step;
      }
      if (xPos < 200) 
      {
        x = 1;
        xPos = 200;
      }
      if (xPos >= (width - Woffset-200)) 
      {
        x = 0;
        xPos = (width - Woffset-200);
      }
      img.style.left = xPos + document.body.scrollLeft;
      img.style.top = yPos + document.body.scrollTop;
    }
    function start() 
    {
      interval = setInterval('changePos()', delay);
    }
    function pause_resume() 
    {
        clearInterval(interval);
    }
    start();
    </script>
    <script language=javascript>
    var cao_x;
    var cao_y;
    var divcao;
    var isDown = false;
    function display() 
    {  //document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>查看效果</button></td></tr></table>");
      document.write("<div  id='cao1' style='position:absolute;display:none;width:200px;height:180px;font-size:12px;position:absolute;text-align:center;' >");
      document.write("<div style='background-color:#dbdbdb;border:1px solid #cccccc;z-index:500'>");
      document.write("<table width=200 height=20 bgcolor=green  style='cursor:move;' onmousedown='mdown(event)' onmouseup='isDown =false;' onmousemove='caoMove(event)'> ");
      document.write("<tr align=center>");
      document.write("<td align=left>按下左键可拖动</td>");
      document.write("</tr>");
      document.write("</table>");
      document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><br>可拖动层<br></span>");
      document.write("  </div>");
      document.write("</div>");
    }
    function mdown(ev)
    { 
        ev=ev||window.event;
         var x = ev.x||ev.pageX;
       var y= ev.y ||ev.pageY;
        cao_x=x-parseInt(divcao.style.left);
        cao_y=y-parseInt(divcao.style.top);
        isDown =true;
    }
    function caoMove(ev)  //实现层的拖移
    {
    if(isDown){
        ev=ev||window.event;
      if(ev.button==1|| ev.button==0)
      {
        var caoX=divcao.clientLeft;
        var caoY=divcao.clientTop;
        var x = ev.x||ev.pageX;
        var y=  ev.y ||ev.pageY;
        divcao.style.left=(caoX+(x-cao_x))+"px";
        divcao.style.top=(caoY+(y-cao_y))+"px";
      }
      }
    }
    display();
    setTimeout(function(){
    divcao = document.getElementById("cao1");
    divcao.style.display="";
    divcao.style.left =((document.body.clientWidth-200)/2)+ "px";
    divcao.style.top =((document.body.clientHeight-200)/2)+ "px";},500);window.onscroll=function(ev){
        if(divcao)
        {
          //  divcao.style.top =( (document.body.clientHeight -  divcao.offsetHeight)/2 +document.body.scrollTop )+"px" ;
            SetTop();
        }
    };
    function SetTop()
    {
    var toTop = (document.body.clientHeight -  divcao.offsetHeight)/2 +document.body.scrollTop;
    var top = parseInt(divcao.style.top);
    if(top<toTop-1)
    {
    divcao.style.top = (++top) +"px";
    setTimeout(function(){SetTop();},5);
    }else if(top>toTop+1){
    divcao.style.top = (--top) +"px";
    setTimeout(function(){SetTop();},5);
    }
    }</script>
    </body>
    </html>