<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>zhou's html</title>
<style type="text/css">
html { overflow: scroll; }
body{overflow: hidden;
}
</style>
<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.keyCode && (e.keyCode!=1))||(e.button && (e.button!=1)))return;
                var pos=this.$pos;
                                if(document.defaultView){
                                        _left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}
                                else{
                                        if(this.currentStyle){_left=this.currentStyle["left"];}
                                }
                pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
                                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;
if((e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px'<100+'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.keyCode && (e.keyCode!=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}
        }
        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);
        
}
</script>
</head>
<body>
<div id="test" style=' border:6px solid #000000;left:-20px;top:2px;background-color:#F9F7ED;position:absolute;text-align:center'>
<table id="table1" >
  <tr>
    <td><img src="file:///C|/Documents and Settings/Administrator/桌面/未命名.jpg"></td>
<td><img src="file:///C|/Documents and Settings/Administrator/桌面/未命名.jpg"></td>
  </tr>
</table>
</div>
<script type="text/javascript" charset="utf-8">
new divDrag('test');
</script>
</body>
</html>
当可拖动层向左拖动时,滚动条就慢慢变大了,滚动条的最左边位置向右移动了,层的一部分不见了,怎么样才能固定滚动条最左端位置及滚动范围,大哥们帮帮忙

解决方案 »

  1.   

    这里.
    if((e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px' <100+'px')
    试试下面
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <title>zhou's html </title> 
    <style type="text/css"> 
    html { overflow: scroll; } 
    body{overflow: hidden; 

    </style> 
    <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.keyCode && (e.keyCode!=1))||(e.button && (e.button!=1)))return; 
                    var pos=this.$pos; 
                                    if(document.defaultView){ 
                                            _left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");} 
                                    else{ 
                                            if(this.currentStyle){_left=this.currentStyle["left"];} 
                                    } 
                    pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left); 
                                    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; 
    if((e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px' >0+'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.keyCode && (e.keyCode!=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} 
            } 
            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); 
            

    </script> 
    </head> 
    <body> 
    <div id="test" style=' border:6px solid #000000;left:-20px;top:2px;background-color:#F9F7ED;position:absolute;text-align:center'> 
    <table id="table1" > 
      <tr> 
        <td> <img src="file:///C|/Documents and Settings/Administrator/桌面/未命名.jpg"> </td> 
    <td> <img src="file:///C|/Documents and Settings/Administrator/桌面/未命名.jpg"> </td> 
      </tr> 
    </table> 
    </div> 
    <script type="text/javascript" charset="utf-8"> 
    new divDrag('test'); 
    </script> 
    </body> 
    </html>