javascript——限制范围的拖拽

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

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

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;
};
};
};