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,s){function g(){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 m(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 d)void 0==t[n]&&(t[n]=d[n]),t[n]=d[n];return t}function v(){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,l.scrollTop=l.scrollTop?l.scrollTop:0}function f(){e(window,"mousemove mouseup touchstart touchmove touchend",h),i.evts=[{obj:window,evts:"mousemove mouseup touchstart touchmove touchend",handler:h}]}function h(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,l.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(R=e,"mousedown"==o||"mousemove"==o||"mouseup"==o||(e.preventDefault(),R=e.changedTouches[0]),o){case"touchstart":case"mousedown":var a,d=(n.getBoundingClientRect(),window.getComputedStyle(n,null).getPropertyValue("transform"),e.target.tagName.toLowerCase()),c=e.target;if(e.preventDefault(),e=e||window.event,"which"in e?a=3==e.which:"button"in e&&(a=2==e.button),a)return void p();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(),c.focus(),c.addEventListener("mouseleave",function e(t){var n=e;i.dragBln?c.removeEventListener(t.type,n):(i.dragBln=!1,delete i.noDrag,x(),c.removeEventListener(t.type,n))}),c.addEventListener("blur",function(e){i.dragBln=!1,delete i.noDrag,x()}),!0;i.remainedX=R.pageX-n.offsetLeft,i.remainedY=R.pageY-n.offsetTop,i.distanceStartX=R.pageX,i.distanceStartY=R.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;b(),C(),X();break;case"mouseup":case"touchend":if(!i.dragBln)return;p(),void 0!=r.moveX&&i.dragStopNum<10?B():w(),l.velocity||w()}}function p(){i.dragBln=!1,delete i.noDrag,x(),i.timer=!1,i.velocityBln=!0}function w(){null!=s&&s(r)}function X(){if(void 0!=l.collide)for(var e,t,n=0,o=0;n<l.collide.length;n+=1)for(e=l.collide[n],o=n+1;o<l.collide.length;o+=1)t=l.collide[o],Y(e,t)?(a.collide=!0,a.collideObj={elem:e,target:t}):(a.collide=!1,a.collideObj=null),y(e,t)?(a.collide_inside=!0,a.collide_insideObj={elem:e,target:t}):(a.collide_inside=!1,a.collide_insideObj=null)}function Y(e,t){var n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return!(n.top>o.bottom||n.right<o.left||n.bottom<o.top||n.left>o.right)}function y(e,t){var n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return o.top<=n.top&&n.top<=o.bottom&&o.top<=n.bottom&&n.bottom<=o.bottom&&o.left<=n.left&&n.left<=o.right&&o.left<=n.right&&n.right<=o.right}function B(){function e(){if(i.velocityBln){var t=n.getBoundingClientRect(),o=l.wall?n.parentNode.getBoundingClientRect():document.body.getBoundingClientRect();n.style.left=(h.x+=v)+"px",n.style.top=(h.y+=f)+"px",v-=v*d,f-=f*d,l.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,w()),i.animFram2=window.requestAnimationFrame(e)}}if(l.velocity){var t=r,o={x:t.startX,y:t.startY},a={x:t.endX,y:t.endY},d=.045,u=c.distance2Point(o,a).distance,s=(t.endTime-t.startTime)/1e3,g=u/s/l.weight,m=(c.angle2Point(o,a).degree,c.angle2Point(o,a).rad),v=Math.cos(m)*g,f=Math.sin(m)*g,h={x:a.x,y:a.y};i.animFram2=window.requestAnimationFrame(e)}}function b(){if(i.moveX=R.pageX-i.remainedX,i.moveY=R.pageY-i.remainedY-l.scrollTop,1==l.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=R.pageX-i.distanceStartX,i.distanceY=R.pageY-i.distanceStartY,r.moveX=i.distanceX,r.moveY=i.distanceY}function C(){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 x(){[].forEach.call(i.evts,function(e){t(e.obj,e.evts,e.handler)}),delete n.chkEvtBln}var R,S=arguments;!function(){void 0==n.chkEvtBln&&(n.chkEvtBln=!0,l=m(u),s=function(){var e=null;return S.length>=2&&"function"==typeof S[S.length-1]&&(e=S[S.length-1]),e}(),g(),v(),f(),h(window.event))}()}var o={},i={},a={},l={},r={},d={},c={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,l=Math.atan2(a,i),r=180*l/Math.PI,d={rad:l,degree:r};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,l=Math.sqrt(i*i+a*a),r={p1:n,p2:o,dx:i,dy:a,distance:l};return r}};return n.prototype={info:function(){return r},set_weight:function(e){d.weight=e},chk_collide:function(e){a.collide&&e(a.collideObj)},chk_collide_inside:function(e){a.collide_inside&&e(a.collideObj)}},n}();
var boxs = document.querySelectorAll( 'div.box' ) // 현재 겹쳐지는지의 상태를 알아야하는 엘리먼트들 모음
, box1 = document.querySelector( 'div.box.num1' ) // 작은 드래그 박스
, box2 = document.querySelector( 'div.box.num2' ) // 큰 드래그 박스
, dragBox ; // new 연산자로 deagHandler 를 대입받을 변수
box1.addEventListener( 'mousedown' , function (e) {
var moveFunc ;
dragBox = new dragHandler( box1 , { collide : boxs } ) ;
box1.addEventListener( 'mousemove' , function (e) {
moveFunc = arguments.callee ;
box1.style.removeProperty( 'background-color' ) ;
box2.style.removeProperty( 'background-color' ) ;
dragBox.chk_collide( function ( contents ) {
// 드래그 하는 엘리먼트가 다른 엘리먼트들과 충돌이 났는지를 확인할 수 있는 제어 함수
contents.elem.style.backgroundColor = 'indianred' ;
}) ;
dragBox.chk_collide_inside( function ( contents ) {
// 드래그 하는 엘리먼트가 다른 엘리먼트의 안에 모두 포함이 되었는지를 확인할 수 있는 제어 함수
contents.target.style.backgroundColor = 'purple' ;
}) ;
}) ;
box1.addEventListener( 'mouseup' , function (e) {
var upFunc = arguments.callee ;
box1.removeEventListener( e.type , upFunc ) ;
box1.removeEventListener( 'mousemove' , moveFunc ) ;
}) ;
}) ;
box2.addEventListener( 'mousedown' , function (e) {
dragHandler( box2 , { collide : boxs } ) ;
}) ;
<div class="box num1"></div>
<div class="box num2"></div>
div.box { width: 50px; height: 50px; position: absolute; }
div.box.num1 { background-color: #eee; left: 100px; top: 100px; z-index: 10; }
div.box.num2 { background-color: #ccc; left: 300px; top: 100px; width: 200px; height: 200px; }