SOURCE

window.onload = function(){
				var oBox = document.querySelector('#demo');
				//alert(oBox)
				var oBox1=oBox.children[0];
				//alert(oBox1)
				var x = 0;
				var y = 0;
				document.onmousedown = function(ev){
					var eV = ev || event;
					//x  y分别代表鼠标与div之间的横坐标和纵坐标
					x = eV.clientX - oBox1.offsetLeft;
					y = eV.clientY - oBox1.offsetTop;
					//alert(x)
					document.onmousemove = function(ev){
						var eV = ev || event
						//m  n  代表当前div的横坐标和纵坐标
							n = eV.clientX - x;
							m = eV.clientY - y;
							
						//if判断阻止div跑出页面；
						if(n<0){n=0}
						else if(n>oBox.offsetWidth - oBox1.offsetWidth){
							n = oBox.offsetWidth - oBox1.offsetWidth
						}
						if(m<0){m=0}
						else if(m>oBox.offsetHeight-oBox1.offsetHeight){
							m=oBox.offsetHeight-oBox1.offsetHeight
						}
						//定义div的坐标
						oBox1.style.left = n + 'px';
						oBox1.style.top = m + 'px';
					}
					//释放move事件
					document.onmouseup = function(ev){
						var eV = ev || event;
						document.onmousemove = null;
						document.onmouseup = null;
					}
				}
			}

<div class="demo" id="demo">
  <div class="box" id="box"></div>
</div>

*{
  margin:0;
  padding:0
}
.demo{
  width:1204px;
  height:800px;
  background:#ccc;
  margin:0 auto
}
.box{
  width:200px;
  height:200px;
  background:blue
}