javascript——限制范围的拖拽

CSS部分：

#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}

HTML部分：

<div id="div1"></div>
<img src="img/1.jpg" id="img1" />

JS部分：

window.onload = function(){

    // 获取相关元素
    var oDiv = document.getElementById('div1');
    var oImg = document.getElementById('img1');

    // 函数调用
    drag(oDiv);
    drag(oImg);

    // drag函数封装
    function drag(obj){

        // 拖拽第一步：鼠标按下时触发
        obj.onmousedown = function(ev){

            // 获取事件对象
            var ev = ev || event;

            // 获取鼠标按下时的坐标位置
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;

            // 判断获取捕获
            if(obj.setCapture){
                obj.setCapture();
            }

            // 拖拽第二步：鼠标移动时触发
            document.onmousemove = function(ev){

                // 获取事件对象
                var ev = ev || event;

                // 获取当前对象距离X/Y轴的距离
                var L = ev.clientX - disX;
                var T = ev.clientY - disY;

                // 判断是否超出左边界
                if(L < 0 ){
                    L = 0;
                }else if( L > document.documentElement.clientWidth - obj.offsetWidth){
                    L = document.documentElement.clientWidth - obj.offsetWidth;
                }

                // 判断是否超出上边界
                if(T < 0){
                    T = 0;
                }else if( T > document.documentElement.clientHeight - obj.offsetHeight){
                    T = document.documentElement.clientHeight - obj.offsetHeight;
                }

                // 然后获取当前对象距离左边、上边的距离
                obj.style.left = L + 'px';
                obj.style.top = T + 'px';
            };

            // 拖拽第三步：鼠标释放时触发
            document.onmouseup = function(){
                
                document.onmousemove = document.onmouseup = null;

                // 判断释放捕获
                if(obj.releaseCapture){
                    obj.releaseCapture();
                }
            };

            // 阻止默认事件
            return false;
        };
    };
};

修改if条件的L/T小于号后面的数值可以使它有种磁性吸附的感觉。