写了一个滑动条，但是有个问题，麻烦高手看一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
var beginy;
function getStyleNumber(style){
style = parseInt(style.substring(0,style.indexOf('px')));
return isNaN(style)?0:style;
} function clickplus(){
var slider = document.getElementById("slider");
var t = getStyleNumber(slider.style.top);
if(t==0) return;
t = t-11;
if(t<=0) t = 0;
slider.style.top = t+'px';
}

function clickminus(){
var slider = document.getElementById("slider");
var t = getStyleNumber(slider.style.top);
if(t==209) return;
t = t+11;
if(t>=209) t = 209;
slider.style.top = t+'px';
}

function pressslider(){
beginy=window.event.clientY+document.body.scrollTop  - document.body.clientTop;
document.onmousemove = function(){
moveslider();
}
document.onmouseup = function(){document.onmousemove = null;}
}

function moveslider(){
var slider = document.getElementById("slider");
var _y=window.event.clientY+document.body.scrollTop  - document.body.clientTop;
var pixel = _y-beginy;
var t = getStyleNumber(slider.style.top);
var tmp = pixel+t;
if(tmp<209 && tmp>0){
slider.style.top = tmp+'px';
beginy = _y;
}
}


</script>
<body>
<div><div style="position:absolute;top:50px;left:100px;width:18px;height:225px;background-image:url(../images/sliderbar/zoom-bg.png)">
<div id="plus" style="position:absolute;top:-10px" onmousemove="this.style.cursor='hand'" onclick="clickplus()">
<img src="D:/scj/GIS_FRAME/GIS_FrameWork_App/ProGISClient/public_html/images/sliderbar/zoom-plus.png" />
</div>
<div id="slider" style="position:absolute;top:0px" onmousemove="this.style.cursor='hand'" onmousedown="pressslider()">
<img src="../images/sliderbar/slider.png" />
</div>
<div id="minus" style="position:absolute;top:221px" onmousemove="this.style.cursor='hand'" onclick="clickminus()">
<img src="../images/sliderbar/zoom-minus.png" />
</div>
</div></div>
</body>
</html>问题是这样的：
拖着中间的滑动块拉动的时候，只移动了很小一点距离，然后鼠标就变成禁手了
那我再松开鼠标，禁手也消失了，然后鼠标再移动的时候滑动块正常滑动了。

解决方案 »

  1.   

    这个网址讲的很详细，以及在ff下也能运行的方法：但是我没有找你问的答案
    http://www.52515.net:8088/file.asp?66696c6569643d3935342672713d323030372d322d3926626f61726469643d3633
      

  2.   

    document.onDragStart = function(){return false;}
      

  3.   

    LZ，我真的没有看懂您的代码，就随意写了个包括横向、纵向和任意方向拖动demo，兼容IE8.0、Chrome6.0.440、Safari5.0、Opera10.60 Beta，供参考。
    对应你的滚动条，可选用纵向实例，样式初始化中的cssText字符串可以写进样式表，拖动控制在回调函数中实现，根据需要修改取舍。
    demo：<script type=text/javascript>
    function $(o) {
           return 'function'==typeof o ? (window.onload=o) : 'string'==typeof o ? document.getElementById(o)||o : null;
    }
    $.clss = function (o){
           return o.currentStyle || document.defaultView.getComputedStyle(o, null);
    }
    $.drag = function (container, drager, callback, Initialize) {
           if (drager=='undefined' || container=='undefined') return;
           typeof Initialize=='function' && Initialize(container, drager);
           var X = container.offsetWidth  - drager.offsetWidth;
           var Y = container.offsetHeight - drager.offsetHeight;
           drager.onmousedown = function (e) {
                  var _x = _y = m = n = 0, o = null, e = e || window.event;
                  e.preventDefault ? e.preventDefault() : (e.returnValue=!!0); 
                  o = e.srcElement || e.target;
                  m = e.clientX - parseInt($.clss(o).left);
                  n = e.clientY - parseInt($.clss(o).top );
                  ! +'\v1' && o.setCapture();
                  document.onmousemove = function (e) {
                 var  e = e || window.event,
                         x = e.clientX-m,y = e.clientY-n,
                         kx = X >= 0 && x <= X && x >= 0,
                         ky = Y >= 0 && y <= Y && y >= 0;
                         ! kx || (o.style.left = x+'px', _x = 100*x/X>>0);
                         ! ky || (o.style.top  = y+'px', _y = 100*y/Y>>0); 
                         typeof callback=='function' && callback(_x, _y);
                         return false
                  }
                  document.onmouseup = function () { 
                         ! +'\v1' && o.releaseCapture(); 
                         document.onmouseup = document.onmousemove = o = null;
                  }
           }
    }$(function(){
           $.drag($('container1'), $('drager1'), function(x, y){
                         $("show").innerHTML = "拖动比率为：横向" + x + "%，纵向" + y + "% 。"; //do someth.
                  } 
                 ,function(c, d){
                         c.style.cssText = 'position:absolute;left:100px;top:50px;width:500px;height:200px;background:red';
                         d.style.cssText = 'position:absolute;left:0px;top:0px;cursor:pointer;width:50px;height:50px';
                         d.src = 'http://avatar.profile.csdn.net/6/7/B/2_happyscjjj.jpg';
           })
           $.drag($('container2'), $('drager2'), function(x, y){
                         $("show").innerHTML = "拖动比率为：横向" + x + "%，纵向" + y + "% 。"; //do someth.
                  } 
                 ,function(c, d){
                         c.style.cssText = 'position:absolute;left:0px;top:210px;width:500px;height:50px;background:red';
                         d.style.cssText = 'position:absolute;left:0px;top:0px;cursor:pointer;width:50px;height:50px';
                         d.src = 'http://avatar.profile.csdn.net/6/7/B/2_happyscjjj.jpg';
           })
           $.drag($('container3'), $('drager3'), function(x, y){
                         $("show").innerHTML = "拖动比率为：横向" + x + "%，纵向" + y + "% 。"; //do someth.
                  } 
                 ,function(c, d){
                         c.style.cssText = 'position:absolute;left:220px;top:60px;width:50px;height:400px;background:red';
                         d.style.cssText = 'position:absolute;left:0px;top:0px;cursor:pointer;width:50px;height:50px';
                         d.src = 'http://avatar.profile.csdn.net/6/7/B/2_happyscjjj.jpg';
           })
    })
    </script><div id="show"></div>
    <div id='container1'><img id='drager1'><div>
    <div id='container2'><img id='drager2'><div>
    <div id='container3'><img id='drager3'><div>