实现div的拖动

如何实现一个div的拖动，代码如下

<div id = 'p2'>
		<div id="d1">
			<button>haha</button>
		</div>
</div>

		#d1{
			position: absolute;
			padding: 10px;
			
			left: 10px;
			top: :10px;
			width: 200px;
			height:200px;
			background:blue;
			
		}
		#p2{
			position: relative;
			width: 500px;
			height: 500px;
			background: red;
		}

       var di = document.getElementById('d1')//获取dom节点
	   var di2 = document.getElementById('p2')
	   di.onmousedown = function(e){
		   var dx = e.offsetX//和下面的两种方法皆可，offsetX获取鼠标位置在父元素中的坐标(事件属性)
		   var dy = e.clientY - di.offsetTop//client获取返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标，offsetTop(dom元素方法)返回元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档，dx和dy主要是获取事件发生时鼠标相对于父元素的位置
		   document.onmousemove = function(e){
			   var x = e.clientX - dx//x和y返回移动之后的坐标
			   var y = e.clientY - dy
			   
			   if(x<0){
				   x = 0
			   }else if(x>di2.offsetWidth-di.offsetWidth){//判断是否超出外层界限
				   x = di2.offsetWidth-di.offsetWidth
			   }
			   
			   if(y<0){
				   y = 0
			   }else if(y>di2.offsetHeight - di.offsetHeight){
				   y = di2.offsetHeight - di.offsetHeight
			   }
			   
			   di.style.left = x + 'px'
			   di.style.top = y + 'px'
			   
			   只为
		   }
		   document.onmouseup = function(e){
			   document.onmousemove = null//重新
			   document.onmouseup = null
		   }
	   }