div层被拖动时，如果鼠标过快会使得鼠标脱离div层,请问如何解决。详见代码

以下代码直接复制即可运行，希望各位大侠能告诉我如何在本代码基础上修改，而不是从网上找个例子。我想知道原因出在哪里。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="text.WebForm1" %><!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="弹出框" onclick="show_Win('div_Test','tr_Drag')" />
    <div id="div_Test" style="display:none;">
        <table>
            <tr id="tr_Drag">
                <td style="border:solid 1px red">
                    拖动此处
                </td>
            </tr>
            <tr>
                <td>
                    拖动时，如果鼠标速度过快<br />则会出现鼠标离开div框的现象<br />请问如何在本代码基础上改进
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html><script type="text/javascript">
    function show_Win(div_Win, tr_Title) {
        var iWidth_Scroll = document.documentElement.scrollWidth; //滚动宽度
        var iWidth_See = document.documentElement.clientWidth; //可见区域的宽度
        var iHeight = document.documentElement.clientHeight;
        var bgObj = document.createElement("iframe");
        bgObj.setAttribute("id", "div_Bg");
        bgObj.style.position = "absolute";
        bgObj.style.left = "0px";
        bgObj.style.top = "0px";
        bgObj.style.width = iWidth_Scroll + "px";
        bgObj.style.height = Math.max(document.body.clientHeight, iHeight) + "px";
        bgObj.style.backgroundColor = "#000000";
        bgObj.style.filter = "Alpha(Opacity = 60)";
        bgObj.style.Opacity = 0.6;
        bgObj.style.zIndex = "9999";
        document.body.appendChild(bgObj);        var msgObj = document.getElementById(div_Win);
        msgObj.style.display = '';
        msgObj.style.position = "absolute";
        msgObj.style.top = document.documentElement.scrollTop;
        msgObj.style.left = (iWidth_See - msgObj.offsetWidth) / 2 + "px";
        msgObj.style.backgroundColor = "#FFFFFF";
        msgObj.style.border = "double 4px #808080";
        msgObj.style.zIndex = "10000";        var moveX = 0;
        var moveY = 0;
        var moveTop = 0;
        var moveLeft = 0;
        var moveable = false;
        var docMouseMoveEvent = document.onmousemove;
        var docMouseUpEvent = document.onmouseup;
        var titleBar = document.getElementById(tr_Title);
        titleBar.style.cssText = "cursor:move;";
        titleBar.onmousedown = function() {
            var evt = getEvent();
            moveable = true;
            moveX = event.clientX;
            moveY = evt.clientY;
            moveTop = parseInt(msgObj.style.top);
            moveLeft = parseInt(msgObj.style.left);
            document.onmousemove = function() {
                if (moveable) {
                    var evt = getEvent();
                    var x = moveLeft + evt.clientX - moveX;
                    var y = moveTop + evt.clientY - moveY;
                    if (x > 0 && (x + msgObj.offsetWidth < iWidth_See) && y > 0 && (y + msgObj.offsetHeight < iHeight)) {
                        msgObj.style.left = x + "px";
                        msgObj.style.top = y + "px";
                    }
                }
            };            document.onmouseup = function() {
                if (moveable) {
                    document.onmousemove = docMouseMoveEvent;
                    document.onmouseup = docMouseUpEvent;
                    moveable = false;
                    moveX = 0;
                    moveY = 0;
                    moveTop = 0;
                    moveLeft = 0;
                }
            };
        }
    }    function getEvent() {
        return window.event || arguments.callee.caller.arguments[0];
    }
</script>

解决方案 »

  1.   

    var moveObj;//声明一个变量，用来存放需要拖动的element
    //在需要拖动的div注册事件：
    div的onmousedown=function(){
     moveObj=this;//将要拖动的div存至moveObj
    }//注册整个文档的移动事件
    document.onmousemove=function(){
      if(!moveObj){return;}//如果变量里没有需要移动的element，就直接结束
      //在此处移动div,移动的算法自己搞定
      moveObj.style.top=xxx+"px";
      moveObj.style.left=xxx+"px";
    }
    //然后注册整个文档的鼠标弹起事件
    document.onmouseup=function(){
     moveObj=null;//鼠标抬起就清除移动对象。
    }
      

  2.   

    给个思路鼠标按下的时候记下，开始拖动，但是DIV并不动
    一直到鼠标松开，取得鼠标的位移，然后改变DIV的位置
      

  3.   

    当时我也碰到了这个问题，
    不过用了这个很挫的办法
    设置鼠标捕获
    var obj = document.getElementById("拖动元素的ID");
    obj.setCapture();  //即使鼠标移出对象，同样能触发事件鼠标弹起的时候
    obj.releaseCapture();  //取消捕获
      

  4.   


    <!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 runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <input type="button" value="弹出框" onclick="show_Win('div_Test','tr_Drag')" />
        <div id="div_Test" style="display:none;">
            <table>
                <tr id="tr_Drag">
                    <td style="border:solid 1px red">
                        拖动此处
                    </td>
                </tr>
                <tr>
                    <td>
                        拖动时，如果鼠标速度过快<br />则会出现鼠标离开div框的现象<br />请问如何在本代码基础上改进
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html><script type="text/javascript">
        function show_Win(div_Win, tr_Title) {
            var iWidth_Scroll = document.documentElement.scrollWidth; //滚动宽度
            var iWidth_See = document.documentElement.clientWidth; //可见区域的宽度
            var iHeight = document.documentElement.clientHeight;
            var bgObj = document.createElement("iframe");
            bgObj.setAttribute("id", "div_Bg");
            bgObj.style.position = "absolute";
            bgObj.style.left = "0px";
            bgObj.style.top = "0px";
            bgObj.style.width = iWidth_Scroll + "px";
            bgObj.style.height = Math.max(document.body.clientHeight, iHeight) + "px";
            bgObj.style.backgroundColor = "#000000";
            bgObj.style.filter = "Alpha(Opacity = 60)";
            bgObj.style.Opacity = 0.6;
            bgObj.style.zIndex = "9999";
            document.body.appendChild(bgObj);        var msgObj = document.getElementById(div_Win);
            msgObj.style.display = '';
            msgObj.style.position = "absolute";
            msgObj.style.top = document.documentElement.scrollTop;
            msgObj.style.left = (iWidth_See - msgObj.offsetWidth) / 2 + "px";
            msgObj.style.backgroundColor = "#FFFFFF";
            msgObj.style.border = "double 4px #808080";
            msgObj.style.zIndex = "10000";        var moveX = 0;
            var moveY = 0;
            var moveTop = 0;
            var moveLeft = 0;
            var moveable = false;
            var docMouseMoveEvent = document.onmousemove;
            var docMouseUpEvent = document.onmouseup;
            var titleBar = document.getElementById(tr_Title);
            titleBar.style.cssText = "cursor:move;";
            titleBar.onmousedown = function() {
                var evt = getEvent();
                moveable = true;
                moveX = event.clientX;
                moveY = evt.clientY;
                moveTop = parseInt(msgObj.style.top);
                moveLeft = parseInt(msgObj.style.left);
        
                titleBar.setCapture();             document.onmousemove = function() {
                    if (moveable) {
                        var evt = getEvent();
                        var x = moveLeft + evt.clientX - moveX;
                        var y = moveTop + evt.clientY - moveY;
                        if (x > 0 && (x + msgObj.offsetWidth < iWidth_See) && y > 0 && (y + msgObj.offsetHeight < iHeight)) {
                            msgObj.style.left = x + "px";
                            msgObj.style.top = y + "px";
                        }
                    }
                };            document.onmouseup = function() {
                    if (moveable) {
                        document.onmousemove = docMouseMoveEvent;
                        document.onmouseup = docMouseUpEvent;
                        moveable = false;
                        moveX = 0;
                        moveY = 0;
                        moveTop = 0;
                        moveLeft = 0;     titleBar.releaseCapture(); 
                    }
                };
            }
        }    function getEvent() {
            return window.event || arguments.callee.caller.arguments[0];
        }
    </script>