Project 진행 중 Drag&Drop Library가 필요해서 한번 만들어봤습니다.

– SourceCode & Simple Usage –

https://github.com/RegularMotion/draggable

– Demo –

* 개인적으로 Chrome, FF, Opera, Safari, IE(8.0), iOS, Android에서 정상 동작 확인하였습니다.

http://the-next.tv/draggable/ 

– Drag & Drop Library ‘draggable’을 구현하면서 배운 3가지 – 

1. Object 또는 Pointer의 위치를 Tracking할 필요가 있는 경우 Event Listener를 등록할 때 함수대신 Object를 넘겨주고 

    Object에 handleEvent 함수를 override하는 것이 좋다.

아래와 같은 방식으로 구현할 경우 Object 변수에 closure를 발생시키지 않고 접근할 수 있기 때문에

Object변수를 Tracking할 필요가 있는 경우 이점이 되는 것 같습니다.

2. ‘touchmove’나 ‘mousemove’의 경우 지나치게 자주(1초에 100회 이상) 호출되는 함수이기 때문에 해당 함수의 listener를 가볍게 구현하거나, 그렇지 않은 경우 filtering을 해주는 작업이 필요했습니다.

전부 처리할 경우 Android Device에서 버벅거림이 심해지는 것 같습니다.

저는 20ms이내에 다시 호출될 경우 listener가 동작하지 않도록 pending 변수를 두었습니다.

3. Javascript에서 css의 z-index값을 수정할 경우 style[“z-index”]가 아닌 style[“zIndex”]를 사용해야
모든 브라우저에서 동일하게 동작함.

‘draggable’이 다른 분들께 도움이 되었으면 합니다.