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,u,c){function s(){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")}function g(e){var t={weight:50};for(var n in e)void 0==t[n]&&(t[n]=e[n]),t[n]=e[n];for(var n in l)void 0==t[n]&&(t[n]=l[n]),t[n]=l[n];return t}function m(){i.evts=[],i.dragBln=!1,i.pos={remainedX:null,remainedY:null,distanceStartX:null,distanceStartY:null,moveX:null,moveY:null},i.timer=!0,i.velocityBln=!0,i.noDrag=!1,i.weight=50,i.animFram1=null,i.animFram2=null,i.endPosArr=[],i.dragStopNum=0,a.scrollTop=a.scrollTop?a.scrollTop:0}function v(){e(window,"mousemove mouseup touchstart touchmove touchend",f),i.evts=[{obj:window,evts:"mousemove mouseup touchstart touchmove touchend",handler:f}]}function f(e){function t(){if(i.timer){if(r.endX=r.startX+i.distanceX,r.endY=r.startY+i.distanceY,r.endTime=Date.now(),i.endPosArr.push(r.endX),i.endPosArr[i.endPosArr.length-2]==r.endX?i.dragStopNum+=1:i.dragStopNum=0,a.wall){var e=n.parentNode.getBoundingClientRect(),o=n.getBoundingClientRect();r.endX>e.width-o.width&&(r.endX=e.width-o.width,r.moveX=r.endX-r.startX),r.endY>e.height-o.height&&(r.endY=e.height-o.height,r.moveY=r.endY-r.startY),r.endX<0&&(r.endX=0,r.moveX=r.endX-r.startX),r.endY<0&&(r.endY=0,r.moveY=r.endY-r.startY)}i.animFram1=window.requestAnimationFrame(t)}}var o=e.type;switch(B=e,"mousedown"==o||"mousemove"==o||"mouseup"==o||(e.preventDefault(),B=e.changedTouches[0]),o){case"touchstart":case"mousedown":var l,d=(n.getBoundingClientRect(),window.getComputedStyle(n,null).getPropertyValue("transform"),e.target.tagName.toLowerCase()),u=e.target;if(e.preventDefault(),e=e||window.event,"which"in e?l=3==e.which:"button"in e&&(l=2==e.button),l)return void h();if(i.velocityBln=!1,i.timer=!1,r={},window.cancelAnimationFrame(i.animFram1),window.cancelAnimationFrame(i.animFram2),i.timer=!0,"button"==d||"a"==d||"input"==d||"textarea"==d||"select"==d)return i.noDrag=!0,e.stopPropagation(),u.focus(),u.addEventListener("mouseleave",function e(t){var n=e;i.dragBln?u.removeEventListener(t.type,n):(i.dragBln=!1,delete i.noDrag,y(),u.removeEventListener(t.type,n))}),u.addEventListener("blur",function(e){i.dragBln=!1,delete i.noDrag,y()}),!0;i.remainedX=B.pageX-n.offsetLeft,i.remainedY=B.pageY-n.offsetTop,i.distanceStartX=B.pageX,i.distanceStartY=B.pageY,r.startX=i.distanceStartX-i.remainedX,r.startY=i.distanceStartY-i.remainedY,r.startMouseX=i.distanceStartX,r.startMouseY=i.distanceStartY,r.startTime=Date.now(),i.animFram1=window.requestAnimationFrame(t),i.dragBln=!0;break;case"touchmove":case"mousemove":if(!i.dragBln)return;if(i.noDrag)return;X(),Y();break;case"mouseup":case"touchend":if(!i.dragBln)return;h(),void 0!=r.moveX&&i.dragStopNum<10?w():p(),a.velocity||p()}}function h(){i.dragBln=!1,delete i.noDrag,y(),i.timer=!1,i.velocityBln=!0}function p(){null!=c&&c(r)}function w(){function e(){if(i.velocityBln){var t=n.getBoundingClientRect(),o=a.wall?n.parentNode.getBoundingClientRect():document.body.getBoundingClientRect();n.style.left=(h.x+=v)+"px",n.style.top=(h.y+=f)+"px",v-=v*u,f-=f*u,a.wall&&(t.left+t.width>o.width+o.left&&(v=-Math.abs(v)),t.left<0+o.left&&(v=Math.abs(v)),t.top+t.height>o.height+o.top&&(f=-Math.abs(f)),t.top<0+o.top&&(f=Math.abs(f))),100*Math.abs(v)<=g&&100*Math.abs(f)<=g&&(i.velocityBln=!1,p()),i.animFram2=window.requestAnimationFrame(e)}}if(a.velocity){var t=r,o={x:t.startX,y:t.startY},l={x:t.endX,y:t.endY},u=.045,c=d.distance2Point(o,l).distance,s=(t.endTime-t.startTime)/1e3,g=c/s/a.weight,m=(d.angle2Point(o,l).degree,d.angle2Point(o,l).rad),v=Math.cos(m)*g,f=Math.sin(m)*g,h={x:l.x,y:l.y};i.animFram2=window.requestAnimationFrame(e)}}function X(){if(i.moveX=B.pageX-i.remainedX,i.moveY=B.pageY-i.remainedY-a.scrollTop,1==a.wall){var e=n.parentNode;i.moveX+n.offsetWidth>=e.getBoundingClientRect().width&&(i.moveX=e.getBoundingClientRect().width-n.offsetWidth),i.moveY+n.offsetHeight>=e.getBoundingClientRect().height&&(i.moveY=e.getBoundingClientRect().height-n.offsetHeight),i.moveY<0&&(i.moveY=0),i.moveX<0&&(i.moveX=0)}i.distanceX=B.pageX-i.distanceStartX,i.distanceY=B.pageY-i.distanceStartY,r.moveX=i.distanceX,r.moveY=i.distanceY}function Y(){var e=0,t=0;i.moveX-=e,i.moveY-=t,n.style.position="absolute",n.style.left=i.moveX+"px",n.style.top=i.moveY+"px"}function y(){[].forEach.call(i.evts,function(e){t(e.obj,e.evts,e.handler)}),delete n.chkEvtBln}var B,x=arguments;!function(){void 0==n.chkEvtBln&&(n.chkEvtBln=!0,a=g(u),c=function(){var e=null;return x.length>=2&&"function"==typeof x[x.length-1]&&(e=x[x.length-1]),e}(),s(),m(),v(),f(window.event))}()}var o={},i={},a={},r={},l={},d={getPoint:function(e){var t=e.getBoundingClientRect();return{x:t.left,y:t.top}},angle2Point:function(e,t){var n=void 0==e.tagName?e:{x:e.getBoundingClientRect().left,y:e.getBoundingClientRect().top},o=void 0==t.tagName?t:{x:t.getBoundingClientRect().left,y:t.getBoundingClientRect().top},i=o.x-n.x,a=o.y-n.y,r=Math.atan2(a,i),l=180*r/Math.PI,d={rad:r,degree:l};return d},distance2Point:function(e,t){var n=void 0==e.tagName?e:{x:e.getBoundingClientRect().left,y:e.getBoundingClientRect().top},o=void 0==t.tagName?t:{x:t.getBoundingClientRect().left,y:t.getBoundingClientRect().top},i=o.x-n.x,a=o.y-n.y,r=Math.sqrt(i*i+a*a),l={p1:n,p2:o,dx:i,dy:a,distance:r};return l}};return n.prototype={info:function(){return r},set_weight:function(e){l.weight=e}},n}();


var boxNum1 = document.querySelector( 'div.box.num1' ) ; 
var boxNum2 = document.querySelector( 'div.box.num2' ) ; 

boxNum1.addEventListener( 'mousedown' , function (e) {
	// weight : default 50
  dragHandler( boxNum1 , { wall : true , velocity : true , weight : 10 }) ; 
}) ; 
boxNum2.addEventListener( 'mousedown' , function (e) {
  dragHandler( boxNum2 , { wall : true , velocity : true , weight : 100 }) ; 
}) ; 
<div class="box num1"></div>
<div class="box num2"></div>
	html , body {
		overflow: hidden; height: 100%; padding: 0px; margin: 0px; 
	}	
	div.box {
		width: 50px; height: 50px; 
		position: absolute; 
		box-shadow: 0px 0px 10px rgba( 0,0,0,0.3); 
	}
  div.box.num1 {
    left: 100px; top: 100px; 
    background-color: #eee; 
  }
  div.box.num2 {
    left: 200px; top: 200px; 
    background-color: #ccc; 
  }