Edit in JSFiddle

var dragHandler=function(){function e(e,t,n){var t=t.split(" ");[].forEach.call(t,function(t){e.addEventListener(t,n,!1)})}function t(e,t,n){var t=t.split(" ");[].forEach.call(t,function(t){e.removeEventListener(t,n,!1)})}function n(n,i){function l(){a.evts=[],a.dragBln=!1,a.pos={remainedX:null,remainedY:null,distanceStartX:null,distanceStartY:null,moveX:null,moveY:null},a.noDrag=!1,r.scrollTop=r.scrollTop?r.scrollTop:0}function u(){e(window,"mousemove mouseup touchstart touchmove touchend",c),a.evts=[{obj:window,evts:"mousemove mouseup touchstart touchmove touchend",handler:c}]}function c(e){var t=e.type,o=e;switch("mousedown"==t||"mousemove"==t||"mouseup"==t||(e.preventDefault(),o=e.changedTouches[0]),t){case"touchstart":case"mousedown":var i=(n.getBoundingClientRect(),window.getComputedStyle(n,null).getPropertyValue("transform"),e.target.tagName.toLowerCase()),l=e.target;if(e.preventDefault(),"button"==i||"a"==i||"input"==i||"textarea"==i||"select"==i)return a.noDrag=!0,e.stopPropagation(),l.focus(),l.addEventListener("mouseleave",function e(t){var n=e;a.dragBln?l.removeEventListener(t.type,n):(a.dragBln=!1,delete a.noDrag,v(),l.removeEventListener(t.type,n))}),l.addEventListener("blur",function(e){a.dragBln=!1,delete a.noDrag,v()}),!0;a.remainedX=o.pageX-n.offsetLeft,a.remainedY=o.pageY-n.offsetTop,a.distanceStartX=o.pageX,a.distanceStartY=o.pageY,a.dragBln=!0,s.startX=a.distanceStartX-a.remainedX,s.startY=a.distanceStartY-a.remainedY,s.startMouseX=a.distanceStartX,s.startMouseY=a.distanceStartY;break;case"touchmove":case"mousemove":if(!a.dragBln)return;if(a.noDrag)return;if(a.moveX=o.pageX-a.remainedX,a.moveY=o.pageY-a.remainedY-r.scrollTop,1==r.wall){var u=n.parentNode;a.moveX+n.offsetWidth>=u.getBoundingClientRect().width&&(a.moveX=u.getBoundingClientRect().width-n.offsetWidth),a.moveY+n.offsetHeight>=u.getBoundingClientRect().height&&(a.moveY=u.getBoundingClientRect().height-n.offsetHeight),a.moveY<0&&(a.moveY=0),a.moveX<0&&(a.moveX=0)}a.distanceX=o.pageX-a.distanceStartX,a.distanceY=o.pageY-a.distanceStartY,d();break;case"mouseup":case"touchend":if(!a.dragBln)return;a.dragBln=!1,delete a.noDrag,v(),s.moveX=a.distanceX,s.moveY=a.distanceY,s.endX=s.startX+a.distanceX,s.endY=s.startY+a.distanceY}}function d(){var e=0,t=0;a.moveX-=e,a.moveY-=t,n.style.position="absolute",n.style.left=a.moveX+"px",n.style.top=a.moveY+"px"}function v(){[].forEach.call(a.evts,function(e){t(e.obj,e.evts,e.handler)}),delete n.chkEvtBln}!function(){void 0==n.chkEvtBln&&(n.chkEvtBln=!0,o.btns=n.querySelectorAll("button"),o.links=n.querySelectorAll("a"),o.inputs=n.querySelectorAll("input"),o.textareas=n.querySelectorAll("textarea"),o.selectboxs=n.querySelectorAll("select"),r=i||{},l(),u(),c(window.event))}()}var o={},a={},r={},s={};return n.prototype={info:function(){return s}},n}();

var box = document.querySelector( 'div.box' ) ; 
box.addEventListener( 'mousedown' , function () {
	dragHandler( box , { wall : true }) ; 
}) ; 

<div class="mother">
  <div class="box"></div>
</div>

html , body {
  padding: 0px; margin: 0px; 
}
div.mother {
  width: 300px; height: 300px;
  background-color: #eee; 
  position: relative; left: 100px; top: 100px; 
}
div.box {
  width: 50px; height: 50px; 
  background-color: purple; 
  position: absolute; left: 100px; top: 100px; 
}