기본 호출 방식

사용자가 dragHandler 를 브라우저 페이지내에 로드 하였다면 아무때나 Element 를 드래그할 수 있습니다.

<script> 
var box = document.querySelector( 'div.box' ) ; 
box.addEventListener( 'mousedown' , function () {
	dragHandler ( box ) ; 
}) ; 
</script>
부모가 필요해요.

드래그해야하는 Element가 특정 부모안에 감싸여져 있는 경우가 있습니다. 드래그를 하였을 때에 부모를 벗어나야하는 경우와 무보안에 갖혀있어야 하는 경우가 있습니다.
벗어나야하는 경우는 크게 상관 없지만 갖혀 있어야 할 경우에는 작업시 많은 조건이 필요합니다. dragHandler 는 많은 조건들을 작성하거나 함수를 만들지 않고 하단의 준비된 옵션만 추가하는 것으로 실행할 수 있습니다. 부모의 크기(가로 , 세로)가 몇인지 또는 위치가 어느곳에( position ) 있는지 상관없습니다. 스스로 찾아내어 드래깅 되는 Element 를 알아서 가둬줍니다.

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

dragHandler 는 기본적으로 드래깅 되는 Element를 놓치지 않습니다. 예제에서 보는것처럼 부모창을 벗어난 상태에서 드래그를 지속하고 있어도 Element의 위치를 놓치지 않습니다. (jsfiddle을 넘어갔을 경우 잠시 끊기는것은 외부에서 불러온것이기에(iframe영역) 이벤트 전달이 놓쳐진 것일뿐 실제 브라우저내에서 작업하면 웹 브라우저를 벗어난 경우에도 지속되는것을 확인할 수 있습니다.

사용자 중요 컨텐츠들은 드래그 되지 않아요.

Element 를 드래깅할 경우 가장 까탈스러운 부분은 드래그 컨텐츠 안의 자식 컨텐츠들의 선택입니다. 예를 들어 링크를 클릭하고 싶은데 사용자가 컴퓨터가 아니기에 클릭을 하려던 동작이 드래그로 번질 수 있습니다. 그러한 경우를 방지하기 위한 여러 방법이 존재하는데 dragHandler 플러긴은 기본적으로 사용자정의 태그들의 드래깅을 막고 있습니다. 이러한 방법으로 사용자컨텐츠를 보다 더 자유롭고 편리하게 사용할 수 있습니다.
사용방법은 간단합니다. 따로 작업할 필요 없이 그저 기본 사용법대로 사용하시면 됩니다.

<script> 
var box = document.querySelector( 'div.box' ); 
box.addEventListener( 'mousedown' , function () {
	dragHandler( box ) ; 
}) ; 
</script>
던질 수 있어요!

사용자가 원한다면 Element 를 드래그해서 부드럽게 화면상에서 던질 수 있습니다. 준비되어있는 옵션 'velocity' 를 사용하여 드래그에 가속도를 줄 수 있습니다. 기본적으로 velocity 는 false를 반환하지만 사용자가 true 로 전달 할 수 있습니다.

나는 부모안에서만 던져질 것이에요

dragHandler 의 가속도 옵션은 정해진 부모안에서만 임직이기도 가능합니다. 준비된 옵션 wall 의 값을 true 로 전달해주면 자신과 가장 가까운 부모 태그를 벗어나지 않은 상태에서 가속도 옵션이 설정됩니다.

- wall 옵션이 없다면 자신이 던져진 속도가 소진될 때까지 계속 미끄러집니다.
- wall 옵션이 있다면 가장 가까운 부모를 벗어나지 않습니다.
- 던져진 Element 는 다시 잡아서 멈추거나 다른 방향으로 던질 수 있습니다.
- Element를 마우스로 바로 떄지않고 일정시간 멈춘 상태에서 마우스를 떄면 제자리에서 대기합니다.


가속도 옵션은 body 태그가 아닌 정해진 특정 부모를 정한곳에서도 가능합니다.

가속도를 내 마음대로

dragHandler 의 가속도의 크기를 사용자가 임의로 수정할 수 있습니다.
Element의 무게를 임의대로 정하여 가볍게 던지거나 무겁게 던질 수 있습니다. 준비된 옵션 weight 의 값을 작성하여 주세요.
Element는 weight 옵션의 숫자가 작을수로 가볍고 클수록 무거워 집니다.

mouse 이벤트와 touch 이벤트를 하나로

mouse 이벤트로 드래그를 만드는것은 기본적으로 여러 작업이 필요하지만 dragHandler 는 단지 'mousedown' 이벤트로 Element를 잡는것만으로도 드래그가 가능합니다. touch 이벤트도 마찬가지 입니다. touch 이벤트의 작업은 mouse 이벤트보다 더욱 까다롭지만 dragHandler 는 따로 작업할 것 없이 'touchstart' 이벤트로 Element 를 잡는것 만으로 터치 이벤트로 드래그를 시작할 수 있습니다.

<script> 
var addEvent = function ( obj , evts , handler ) {
	var evts = evts.split( ' ' ) ; 
	[].forEach.call( evts , function ( evt ) { obj.addEventListener( evt , handler , false ) ; }) ; 
} ; 

var box = document.querySelector( 'div.box' ) ; 
addEvent( 'mousedown touchstart' , function () {
	dragHandler ( box ) ; 
}) ; 

</script>
콜백함수

dragHandler 의 가속도가 끝났거나, 혹은 드래그 후에 끝났을 경우 사용자가 그후의 특정 작업이 있을 수 있습니다.
그래서 dragHandler 는 드래그가 끝났다는것을 알리는 콜백함수가 존재합니다.
그저 dragHandler 실행함수의 맨 마지막 인자값으로 함수를 호출해 주시면 됩니다. 그리고 콜백함수는 전달인자 값으로 자기자신이 움직인 정보를 사용자에게 전달 해주기도 합니다. 필요하다면 사용할 수 있습니다. 콜백 함수의 인자값에 대한 정보를 확인하시려면 reference 에서 확인하실 수 있습니다.

드래그 오브젝트끼리의 충돌

드래그되는 Element 끼리 서로 부딪히는 지점을 알려줍니다. 준비되어있는 옵션 'collide' 를 사용하여 드래그 되는 Element 가 충돌 되는 시점을 찾아내서 사용자가 원하는 행동을 취할 수 있습니다.

collide 옵션엔 밸류값으로 드래그가 되는 Element 들을 전달하면 됩니다.

Demo

데모페이지가 준비되어있습니다.
마구마구 던져보아요. 브라우저 크기가 얼만하건 상관없습니다.
던지는 힘이 얼마나 강한지 적은지 상관없습니다.
마우스가 브라우저를 벗어나도 상관 없습니다.
데모페이지에서 확인해보세요. 꾸벅.

DEMO