Reference

draghandler( Element )
자신이 원하는 Element 를 인자로 넘겨주면 드래갱이 시작됩니다.
draghandler( Element , { wall : true } )
드래그 되는 Element가 특정 지역이로부터 갖혀 있어야 할경우 벽을 만들어 줍니다.
draghandler( Element , { velocity : true } )
드래그를 멈출때 바로 정지하지않고 마우스로 던진만큼 가속도가 붙어 이동됩니다. 이동거리는 Element의 무게만큼 비례하여 점점 속도가 줄어듭니다. ( 무게 기본 : 50 )
draghandler( Element , { weight : Number } )
드래그될 Element 의 가상 무게를 정합니다. 기본 50이며 수가 적을 수록 가볍고 클수록 무거워지므로 Number가 클수록 velocity의 이동거리가 짧아집니다.
draghandler( Element , function ( contents ) { enter code.. } )
드래그를 마친 후 사용자가 특정 코드를 삽입해야할 경우 콜백함수를 사용할수 있습니다.
콜백 함수는 드래깅된 자신의 정보를 전달해줍니다.
  • contents.startX : 드래그 x축 시작지점
  • contents.startY : 드래그 y축 시작지점
  • contents.startTime : 드래그 시작 시간
  • contents.endTime : 드래그 멈춤 시간
  • contents.startMouseX : 드래그 시작 마우스 x축 지점
  • contents.startMouseY : 드래그 시작 마우스 y축 지점
  • contents.moveX : 이동된 x축 길이
  • contents.moveY : 이동된 y축 길이
  • contents.endX : 드래그 x축 멈춘지점
  • contents.endY : 드래그 y축 멈춘지점
var variable = new draghandler( Element , { collide : elements } ) ;

variable.chk_collide(function ( contents ) { enter code.. }) ;
드래그 엘리먼트들끼리의 충돌을 확인할 수 있습니다.
충돌된 엘리먼트는 콜백함수로 자신의 정보를 전달해줍니다.
  • contents.elem : 현재 드래그 되는 엘리먼트
  • contents.target : 충돌이 일어난 엘리먼트
사용방법 : https://jsfiddle.net/jjackkun/ke7ws1mm/
var variable = new draghandler( Element , { collide : elements } ) ;

variable.chk_collide_inside(function ( contents ) { enter code.. }) ;
드래그 되는 엘리먼트가 다른 엘리먼트의 영역안에 들어갔는지를 확인할 수 있습니다.
다른 엘리먼트에 포함된 엘리먼트는 콜백함수로 자신의 정보를 전달해줍니다.
  • contents.elem : 현재 포함된 엘리먼트
  • contents.target : 포함한 엘리먼트
사용방법 : https://jsfiddle.net/jjackkun/ke7ws1mm/