鼠标移动DIV问题

<!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=utf-8" />
<title>无标题文档</title>
<style>
#move { position:fixed; cursor:move; width:500px; height:50px; background:#FF0000;}
</style>
<script type="text/javascript">
function a(){alert(1)}
function $$(obj){
return document.getElementById(obj);
}
var _width = document.documentElement.scrollWidth;window.onload=function(){
var move=$$("move");
var moving=false;
var _moveX,_moveY,_downX,_downY;
move.style.left=(_width-500)/2+"px";
move.style.top="100px";
move.onmousedown=function(){
if(!moving){
_moveX=parseInt(move.style.left);
_moveY=parseInt(move.style.top);
_downX=event.clientX;
_downY=event.clientY;
moving=true;
}
}
move.onmouseup=function(){ moving=false;}
move.onmousemove=function(){
if(moving&&event.button==1){
//alert(_downX-_moveX)
move.style.left=(_moveX+event.clientX-_downX)+"px";
move.style.top=(_moveY+event.clientY-_downY)+"px";
}
}
}</script>
</head><body>
<div id="move"></div>
</body>
</html>小弟刚做一个鼠标移动DIV的小实例但是做了过后发现了一个问题，当鼠标移动太快的时候，鼠标会移出我所设定的DIV。后面打开一些大网站的，比如DZ他弹出的DIV无论你鼠标移动多快鼠标永远都在DIV内部请高手帮帮小弟，解决下这个问题。让我的也能在鼠标移动很快的情况下，不要超出我所设定的DIV小弟不胜感激

解决方案 »

  1.   

     move.onmousemove=function(){
                    if(moving&&event.button==1){
                    //alert(_downX-_moveX)
                    move.style.left=(_moveX+event.clientX-_downX)+"px";
                    move.style.top=(_moveY+event.clientY-_downY)+"px";
                    }
                }
     移动时，判断一下 坐标是否在你限定的区域就可以了
      

  2.   

    楼上的没有明白我的意思在IE下我用move.setCapture();这样就可以速度多块都不会让鼠标移动到层外面但是火狐不知道该用对应的什么方法
      

  3.   

    这里是修改后可以在火狐里面拖动的代码但是不能拖动过快，请高手帮忙解决拖动过快鼠标会移除DIV的问题<!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=utf-8" />
    <title>无标题文档</title>
    <style>
    #move { position:fixed; cursor:move; width:500px; height:50px; background:#FF0000;}
    </style>
    <script type="text/javascript">
    function $$(obj){
    return document.getElementById(obj);
    }
    var _width = document.documentElement.scrollWidth;var ifIE = document.all?1:2;window.onload=function(){
    var move=$$("move");
    var moving=false;
    var _moveX,_moveY,_downX,_downY;
    move.style.left=(_width-500)/2+"px";
    move.style.top="100px";
    move.onmousedown=function(e){
    if(!moving){
    //alert(e.screenX)
    if(ifIE==1){
    _moveX=parseInt(move.style.left)-event.clientX;
    _moveY=parseInt(move.style.top)-event.clientY;
    move.setCapture();
    }
    else{
    _moveX=parseInt(move.style.left)-e.screenX;
    _moveY=parseInt(move.style.top)-e.screenY;
    //window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }

    moving=true;
    }
    }
    move.onmouseup=function(){ moving=false; if(ifIE==1) move.releaseCapture(); else window.captureEvents(e.mousemove|e.mouseup);}
    move.onmousemove=function(e){
    if(moving){
    //alert(_downX-_moveX)
    if(ifIE==1){
    move.style.left=_moveX+event.clientX+"px";
    move.style.top=_moveY+event.clientY+"px";
    }
    else{
    move.style.left=_moveX+e.screenX+"px";
    move.style.top=_moveY+e.screenY+"px";
    }
    }
    }
    }</script>
    </head><body>
    <div id="move"></div>
    </body>
    </html>
      

  4.   

    再次修正了一下，火狐下已经可以速度很快的拖动
    但是存在一个BUG，当鼠标离开窗口并释放过后，鼠标还是粘在DIV上，不知道是哪的没有写好<!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=utf-8" />
    <title>无标题文档</title>
    <style>
    #move { position:fixed; cursor:move; width:500px; height:50px; background:#FF0000; -moz-user-select:none;}
    </style>
    <script type="text/javascript">
    function $$(obj){
    return document.getElementById(obj);
    }
    var _width = document.documentElement.scrollWidth;var ifIE = document.all?1:2;window.onload=function(){
    var move=$$("move");
    var moving=false;
    var _moveX,_moveY,_downX,_downY;
    move.style.left=(_width-500)/2+"px";
    move.style.top="100px";
    move.onmousedown=function(e){
    if(!moving){
    //alert(e.screenX)
    if(ifIE==1){
    _moveX=parseInt(move.style.left)-event.clientX;
    _moveY=parseInt(move.style.top)-event.clientY;
    move.setCapture();
    move.onmousemove=abc;
    }
    else{
    _moveX=parseInt(move.style.left)-e.screenX;
    _moveY=parseInt(move.style.top)-e.screenY;
    //window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    document.addEventListener("mousemove",abc,true);
    }

    moving=true;
    }
    }
    move.onmouseup=function(){ moving=false; if(ifIE==1) move.releaseCapture(); else document.removeEventListener("mouseup",abc,true);}

    function abc(e){
    if(moving){
    //alert(_downX-_moveX)
    if(ifIE==1){
    move.style.left=_moveX+event.clientX+"px";
    move.style.top=_moveY+event.clientY+"px";
    }
    else{
    move.style.left=_moveX+e.screenX+"px";
    move.style.top=_moveY+e.screenY+"px";
    }
    }
    }
    }</script>
    </head><body>
    <div id="move"></div>
    </body>
    </html>哪位高手能指正小弟感激不尽