鼠标拖动DIV层的移动范围

Question

我想 用鼠标拖动DIV层移动。。但是移动不能超过边界，
因为我做的的网页是用的一个框架，分为top、left、main
拖动main里的DIV层时 总会把层拖出main的边界 然后拖不回来了，只有刷新页面DIV层才能回来
希望高手给解。。谢谢

Answer 1

<div id="div" style="width:100px;height:100px;border:1px solid #000; position:absolute;"></div>
<script type="text/javascript">
    var startX , startY , objX , objY , moveX , moveY;
    var parent = document.getElementById("div")
    
    var down = function(e)
    {
        e = e || window.event;
        startX = e.clientX;
        startY = e.clientY;
        objX = parent.offsetLeft;
        objY = parent.offsetTop;
        moveX = startX - objX;
        moveY = startY - objY;
        if(!document.addEventListener) this.setCapture();
    
        document.onmousemove = move;
        document.onmouseup = up.bind(this)
        
        if(e.stopPropagation) e.stopPropagation() 
            else e.cancelBubble = true
        if(e.preventDefault) e.preventDefault() 
            else e.returnValue = false         
    }
    
    var move = function(e)
    {
         e = e || window.event;
         startX = e.clientX;
         startY = e.clientY;
         
         parent.style.left = startX - moveX + "px";
         parent.style.top = startY - moveY + "px"; 
         
        if(e.stopPropagation) e.stopPropagation() 
            else e.cancelBubble = true
        if(e.preventDefault) e.preventDefault() 
            else e.returnValue = false          
    }
    
    var up = function(e)
    {
        document.onmousemove = null;
        if(!document.addEventListener) this.releaseCapture();
        
        if(e.stopPropagation) e.stopPropagation() 
            else e.cancelBubble = true
        if(e.preventDefault) e.preventDefault() 
            else e.returnValue = false
    }
    
    parent.onmousedown = down;
</script>

Answer 2

http://www.cnblogs.com/yuteng/articles/1977196.html