간단한 소개
dragHandler 함수는 마우스 드래그 이벤트를 지원해주는 드래그 플러그인입니다. 기본적으로 드래그 플러그인들이 전세계에 몇몇 존재하지만 꼭 필요한 기능이라던가 추가적으로 제작해야하는 옵션들이 있을경우 수정/추가 요청을 하기가 많이 사실상 힘든것이 사실입니다. Element 를 드래그 하기위해 mousedown , move , up 이벤트를 위임하고 사용안할때 해제, 그리고 타이벤트와 겹치지 않게 하기 위한 방법론 등 여간 까다로운게 아닙니다. 그래서 자체적으로 활용할 수 있는 한글로 된 드래그 플러그인을 만들기로 하였습니다.
dragHandler 는 간단한 조작으로 어려운 접근 방법을 쉽게 변화시켜줄 것입니다.
다운로드
첫번째로는 Javascript 파일을 원하는 경로에 적용해주세요. 기본적인 다운로드 파일을 받아보시면 적용되어있으나, 사용할 프로젝트에 원하는 경로가 존재한다면 그에 맞게 경로만 바꿔주시면 됩니다. 그 다음은 CSS 파일도 동일한 방식으로 원하시는 폴더내에 삽입하여 주신 후 경로를 맞춰주시면 됩니다.
경로 설정의 예
<head>
	<title>Main Page</title>
	<script src="./js/draghandler.min.js"></script>
</head>
위처럼 HEAD에 경로를 추가하여 사용할 수 있습니다. 위에 설명한것 처럼 경로는 예시일 뿐이며 정해놓은 경로가 있다면 원하는 경로로 지정하여 파일을 불러오시면 됩니다.
드래깅 실행방법
<script>
	var box = document.querySelector( 'div.box' ) ; 
	box.addEventListener( 'mousedown' , function () {
		dragHandler( box ) ; 
	}) ; 
</script>

간단합니다. 타 사용할 이벤트들)을 설정할 필요 없이 그저 드래그 하고 싶은 Element에 '마우스다운(mousedown event)' 이 일어났을 경우 핸들러글 호출하여주시기만 하면 됩니다. 그 후 이벤트 중복겹침 과 같은 해제는 알아서 작업되어지니 신경쓰지 않으셔도 됩니다. animationFrame Reference 에서 제공하는 옵션들을 확인하여 추가하실 수 있습니다.

마치며.
이게 다입니다.;;
사용자 설명이 되어있는 예제를 보고싶으시다면 EXAMPLE 에서 확인하세요.