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하는 것이 좋다.

element.addEventListener(“mousemove”, function(e) {
           // eventCallback
}, false);

// Object 또는 이벤트의 위치를 Tracking할 필요가 있는 경우.
element.addEventListener(“mousemove”, obj, false);
obj.handleEvent = function(e) {
           // eventCallback
};

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

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

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

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

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

Draggable.prototype.pending = function() {
       Draggable.isPending = true;
             
       setTimeout(function(){
             Draggable.isPending = false;
       }, 20);
};

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

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

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.