iframe中的表格只左右移动，并且不管怎么左右移动左边都紧靠着iframe的边界，不留下白色的空隙

太长了分两段，都保存到一个html页面中<html>
<body>
<div id="test1" >
  <table width="144%" height="17%" >

  <tr bgcolor="#ff7c00" style="text-align:center; table-layout:auto;" class="font_title">
    <td width="26" height="28" bgcolor="#ff7c00" class="content ">Opt.</td>
    <td width="33" bgcolor="#ff7c00" class="content">Lable</td>
    <td width="27" bgcolor="#ff7c00" class="content">No.</td>
    <td width="45" bgcolor="#ff7c00" class="content">From</td>
    <td width="33" bgcolor="#ff7c00" class="content">Date Rec </td>
    <td width="101" bgcolor="#ff7c00" class="content">Name</td>
    <td width="62" bgcolor="#ff7c00" class="content">Nationality</td>
    <td width="23" bgcolor="#ff7c00" class="content">Age</td>
    <td width="41" bgcolor="#ff7c00" class="content">Gender</td>
    <td width="147" bgcolor="#ff7c00" class="content">Education</td>
    <td width="137" bgcolor="#ff7c00" class="content">School</td>

    </tr>

  <tr bgcolor="#fafaf9">
    <td height="35" class="biage" ><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
    </label></td>
    <td class="biage" > </td>
    <td class="biage" >2312</td>
    <td class="biage" >ADMIN</td>
    <td class="biage" >2-23</td>
    <td class="biage" >ALEXANDER BEANLAND </td>
    <td class="biage" >AUS</td>
    <td class="biage" >56</td>
    <td class="biage" >MALE</td>
    <td class="biage" >BACH(SCIENCE-INDUSTRY),rerererere </td>
    <td class="biage" >Hebei Zhangjiakou--Hebei Architecture Engineering College</td>
  </tr>
</table>
</div>
<script type="text/javascript" charset="utf-8">
var $=function(id){return document.getElementById(id)};Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag(){
                var A,B;
        var zIndex=1;

        this.dragStart=function(e){
                e=e||window.event;
                if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
                var pos=this.$pos;
                                if(document.defaultView){
                                        _top=document.defaultView.getComputedStyle(this,null).getPropertyValue("top");
                                        _left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}
                                else{
                                        if(this.currentStyle){_top=this.currentStyle["top"];_left=this.currentStyle["left"];}
                                }
                pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
                pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
                                if(!!A){
                                         if(document.removeEventListener){
                        document.removeEventListener("mousemove",A,false);
                        document.removeEventListener("mouseup",B,false);
                                        }else{
                        document.detachEvent("onmousemove",A);
                        document.detachEvent("onmouseup",B);
                                                document.detachEvent("ondragstart",G);
                        }
                                }
                                A=this.dragMove.create(this);
                B=this.dragEnd.create(this);
                if(document.addEventListener){
                                        document.addEventListener("mousemove",A,false);
                    document.addEventListener("mouseup",B,false);
                }else{
                                        document.attachEvent("onmousemove",A);
                    document.attachEvent("onmouseup",B);
                                                G=function(){return false};
                                                document.attachEvent("ondragstart",G);
                }
                this.style.zIndex=(++zIndex);
                this.stop(e);
        }
        this.dragMove=function(e){
                                e=e||window.event;
                                var pos=this.$pos;
                this.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
                this.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
                                this.stop(e);}
        this.dragEnd=function(e){
                var pos=this.$pos;
                e=e||window.event;

                                if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
                if(document.removeEventListener){
                        document.removeEventListener("mousemove",A,false);
                        document.removeEventListener("mouseup",B,false);
                                }else{
                        document.detachEvent("onmousemove",A);
                        document.detachEvent("onmouseup",B);
                                                document.detachEvent("ondragstart",G);
                }
                                A=null;
                                B=null;
                this.style.zIndex=(++zIndex);
                this.stop(e);
        }
        this.position=function (e){
                var t=e.offsetTop;
                var l=e.offsetLeft;
                while(e=e.offsetParent){
                                t+=e.offsetTop;
                                l+=e.offsetLeft;
                }
                return {x:l,y:t,ox:0,oy:0}
        }
        this.stop=function(e){
                if(e.stopPropagation){
                        e.stopPropagation();
                }else{
                        e.cancelBubble=true;}

                if(e.preventDefault){
                        e.preventDefault();}
                else{e.returnValue=false;}
        }
                this.stop1=function(e){
                        e=e||window.event;
                if(e.stopPropagation){
                        e.stopPropagation();
                }else{
                        e.cancelBubble=true;}        }
        this.create=function(bind){
                var B=this;
                var A=bind;
                return function(e){
                        return B.apply(A,[e]);
                }
        }
        this.dragStart.create=this.create;
        this.dragMove.create=this.create;
        this.dragEnd.create=this.create;


        this.initialize=function(){
                for(var A=0,B=arguments.length;A<B;A++){
                        C=arguments[A];
                        C=(typeof(C)=='object')?C:(typeof(C)=='string'?$(C):null);
                        if(!C)continue;
                        C.$pos=this.position(C);
                        C.dragMove=this.dragMove;
                        C.dragEnd=this.dragEnd;
                        C.position=this.position;
                        C.stop=this.stop;
                                                var $A=[];
                                                $A=$A.extend(C.getElementsByTagName('span')||[]).extend(C.getElementsByTagName('input')||[]);
                                                for(var D=0,E=$A.length;D<E;D++){
                                                        if(C.addEventListener){
                                $A[D].addEventListener("mousedown",this.stop1,false);
                                                                $A[D].addEventListener("mousemove",this.stop1,false);
                                        }else{
                                $A[D].attachEvent("onmousedown",this.stop1);
                                                                $A[D].attachEvent("onmousemove",this.stop1);
                                }
                                                }
                        if(C.addEventListener){
                                C.addEventListener("mousedown",this.dragStart.create(C),false);
                        }else{
                                C.attachEvent("onmousedown",this.dragStart.create(C));
                        }
                }        }
        this.initialize.apply(this,arguments);

}
//生成拖动层很简单
new divDrag('test1');
</script>
</body>
</html>

调试易

iframe中的表格只左右移动，并且不管怎么左右移动左边都紧靠着iframe的边界，不留下白色的空隙

解决方案 »