<!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>
当可拖动层向左拖动时,滚动条就慢慢变大了,滚动条的最左边位置向右移动了,层的一部分不见了,怎么样才能固定滚动条最左端位置及滚动范围,大哥们帮帮忙
<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>
当可拖动层向左拖动时,滚动条就慢慢变大了,滚动条的最左边位置向右移动了,层的一部分不见了,怎么样才能固定滚动条最左端位置及滚动范围,大哥们帮帮忙
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>