带边界的鼠标拖拽经典案例，面试必备

var arr = []; //存放运动轨迹
var timer = null; //计时器
function drag(id){
var ele = document.getElementById(id); //获取所拖拽的元素对象
//按在元素上
ele.onmousedown = function(evt){
var e = evt || window.event; //事件对象兼容
var target = e.target || e.srcElement; //获取事件源
//记录初始位置

	//判断是否按在了id为title的元素对象上
	if(target.id === 'title'){
		//获取鼠标的相对坐标值
		var disX = e.offsetX;
		var disY = e.offsetY;
		arr.push({left : ele.offsetLeft,top : ele.offsetTop})
		//鼠标在文档区移动
		document.onmousemove = function(evt){
			var e = evt || window.event;
			//计算当前拖拽对象移动的坐标值
			var left = e.pageX - disX;
			var top = e.pageY - disY;
			if(left <= 0){
				left  = 0;
			}else if(left >= document.documentElement.clientWidth - ele.offsetWidth){
				left = document.documentElement.clientWidth - ele.offsetWidth;
			}
			if(top <= 0){
				top = 0;
			}else if(top >= document.documentElement.clientHeight - ele.offsetHeight){
				top = document.documentElement.clientHeight - ele.offsetHeight;
			}
			ele.style.left = left + 'px';
			ele.style.top = top + 'px';
			//将当前对象移动的轨迹记录下来
			arr.push({left : ele.offsetLeft,top : ele.offsetTop});
			//console.log(arr);
		}
		//弹起鼠标时，取消移动事件
		document.onmouseup = function(){
			document.onmousemove = null;
		}
		//删除拖拽的默认行为
		document.ondragstart = function(){
			return false;
		}
	}
}

}
//封装回家
function goHome(id){
var ele = document.getElementById(id); //获取回家的对象
var index = arr.length - 1; //取出数组中最大的下标
//启动计时器，逆序取出轨迹中的坐标值
timer = setInterval(function(){
//将回家的坐标值给对象
ele.style.left = arr[index].left + ‘px’;
ele.style.top = arr[index].top + ‘px’;
index --; //步长，下标递减
//当前数组遍历结束时，取消计时器
if(index === -1){
clearInterval(timer);
arr = []; //消除本次的运行轨迹
}
},30)
}