鼠标拖动问题

<div id="divMove" style="POSITION: absolute;left:300;top:300" onselectstart="return false" onmousedown="MouseDown(this)" onmousemove="MouseMove()" onmouseup="MouseUp()">
<table width="150" cellpadding="0" cellspacing="0" border="1">
<tr>
<td height="30" bgcolor="#cccccc">title</td>
</tr>
<tr>
<td height="100"><p align="center">testMove</p></td>
</tr>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
这些代码基本可以实现拖动图层，不过就是当图层超出一屏的时候，也就是出现滚动条以后，就不能把图层拖回了，各位有什么意见，帮帮忙，
谢谢啦，
(*^__^*) 嘻嘻……

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

/**
* Drag.js: drag absolutely positioned HTML elements.
*
* This module defines a single drag( ) function that is designed to be called
* from an onmousedown event handler. Subsequent mousemove events will
* move the specified element. A mouseup event will terminate the drag.
* If the element is dragged off the screen, the window does not scroll.
* This implementation works with both the DOM Level 2 event model and the
* IE event model.
*
* Arguments:
*
*   elementToDrag: the element that received the mousedown event or
*     some containing element. It must be absolutely positioned. Its
*     style.left and style.top values will be changed based on the user's
*     drag.
*
*   event: the Event object for the mousedown event.
**/
function drag(elementToDrag, event) {
    // The mouse position (in window coordinates)
    // at which the drag begins
    var startX = event.clientX, startY = event.clientY;    // The original position (in document coordinates) of the
    // element that is going to be dragged. Since elementToDrag is
    // absolutely positioned, we assume that its offsetParent is the
    // document body.
    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;    // Even though the coordinates are computed in different
    // coordinate systems, we can still compute the difference between them
    // and use it in the moveHandler( ) function. This works because
    // the scrollbar position never changes during the drag.
    var deltaX = startX - origX, deltaY = startY - origY;    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.
    if (document.addEventListener) {  // DOM Level 2 event model
        // Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        // In the IE event model, we capture events by calling
        // setCapture( ) on the element to capture them.
        elementToDrag.setCapture( );
        elementToDrag.attachEvent("onmousemove", moveHandler);
        elementToDrag.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event.
        elementToDrag.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        // In IE 4 we can't use attachEvent( ) or setCapture( ), so we set
        // event handlers directly on the document object and hope that the
        // mouse events we need will bubble up.
        var oldmovehandler = document.onmousemove; // used by upHandler( )
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }    // We've handled this event. Don't let anybody else see it.
    if (event.stopPropagation) event.stopPropagation( );  // DOM Level 2
    else event.cancelBubble = true;                      // IE    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault( );   // DOM Level 2
    else event.returnValue = false;                     // IE    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged. It is responsible for moving the element.
     **/
    function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model        // Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.
        elementToDrag.style.left = (e.clientX - deltaX) + "px";
        elementToDrag.style.top = (e.clientY - deltaY) + "px";        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture( );
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
}
看看这个例子：
<html>
<head>
<title>_xWin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type='text/css'>

</style>
<script language=JScript>

</script><script language='JScript'>

function center(id)
{
xwin = document.getElementById("xMsg"+id);
var wleft = (document.body.clientWidth-xwin.style.width.replace("px",""))/2 < 0 ? 0 : (document.body.clientWidth-xwin.style.width.replace("px",""))/2;
var wtop = (document.body.clientHeight-xwin.style.height.replace("px",""))/2 < 0 ? 0 : (document.body.clientHeight-xwin.style.height.replace("px",""))/2;;

xwin.style.left = wleft;
xwin.style.top  = wtop;

xwinbg = document.getElementById("xMsg"+id+"bg");
xwinbg.style.left = wleft;
xwinbg.style.top  = wtop;
}
</script>
</head>

<body onselectstart='return false' oncontextmenu='return false'>
<a href="javascript:ShowHide('1',null)" >窗口1</a>
<a  href="javascript:ShowHide('2',null)">窗口2</a>
<a  href="javascript:ShowHide('3',null)">窗口3</a>
</body>
</html>