JavaScript中,让一个div在固定的父div中任意拖动

1、css代码

 #big {  
        border: 1px solid #FF3300;  
        width: 300px;  
        height: 300px;  
        position: relative;  
    }  
      
    #small {  
        background: #99CC00;  
        width: 50px;  
        height: 50px;  
        position: absolute;  
        cursor: pointer;  
    }

2、JavaScript代码

<script language="javascript">  
function small_down(e) {  
    var obig = document.getElementById("big");  
    var osmall = document.getElementById("small");  
    var e = e || window.event;  
    /*用于保存小的div拖拽前的坐标*/  
    osmall.startX = e.clientX - osmall.offsetLeft;  
    osmall.startY = e.clientY - osmall.offsetTop;  
    /*鼠标的移动事件*/  
    document.onmousemove = function(e) {  
        var e = e || window.event;  
        osmall.style.left = e.clientX - osmall.startX + "px";  
        osmall.style.top = e.clientY - osmall.startY + "px";  
        /*对于大的DIV四个边界的判断*/  
        if (e.clientX - osmall.startX <= 0) {  
            osmall.style.left = 0 + "px";  
        }  
        if (e.clientY - osmall.startY <= 0) {  
            osmall.style.top = 0 + "px";  
        }  
        if (e.clientX - osmall.startX >= 250) {  
            osmall.style.left = 250 + "px";  
        }  
        if (e.clientY - osmall.startY >= 250) {  
            osmall.style.top = 250 + "px";  
        }  
    };  
    /*鼠标的抬起事件,终止拖动*/  
    document.onmouseup = function() {  
        document.onmousemove = null;  
        document.onmouseup = null;  
    };  
}  
</script>

3、html代码

<body>  
        <div id="big">  
            <div id="small" onmousedown="small_down(event)"></div>  
        </div>  
    </body>

---恢复内容结束---