[Script.aculo.us] dragdrop.js

  dragdrop.js
script.aculo.us에서 Drag&Drop 기능을 제공해주는 라이브러리입니다.

  Droppables
드래그 대상이 되는 Draggable객체들을 Drop할 수 있는 element들을 관리하는 클래스입니다.

  Attribute
Droppables.drops: Array - Droppable 객체(실제로는 add()의 options 전체 항목이 저장됩니다.)들을 저장하는 배열입니다.

  Method
1. Droppables.add(element, options) - Droppable 객체를 추가합니다. options로 다음 사항을 받을 수 있습니다.
options 항목들

• accept - Droppable에서 받아들일 Draggable 객체의 클래스 스트링들을 설정합니다.
  
• containment - Droppable에서 받아들일 Draggable객체의 element나 id를 설정합니다.
  
• hoverclass:boolean - 받아들이기로 한 Draggable객체가 Droppable의 위에 있을 때 css를 설정하는 class를 설정합니다.
  
• overlap - 'horizontal' 또는 'vertical'을 인자로 받습니다. 수직/수평 방향으로 이동할 때 동작이 발생하도록 합니다.
  
• greedy:boolean - true로 설정된 경우 hover와 관련된 처리를 수행하지 않습니다.

options 항목들 중 내부사용 프로퍼티

• tree - tree에서 사용하기 위한 코드로 보임
  
• _continaers - options.containment객체들이 저장됩니다.
  
• element - 실제 Droppable element가 저장됩니다.
  

options 항목의 callback들

• onHover(dragElement, dropElement, position) - 받아들이기로 한 Draggable 객체가 Droppable의 위에 있에 있을 때 메소드를 onHover 인자로 받은 function을 호출합니다.
  
• onDrop(dragElement, dropElement, event) - 받아들이기로 한 Drggable 객체가 Droppable의 위에서 릴리즈되었을 때 onDrop 인자로 받은 function을 호출합니다.

2. Droppables.remove(element) - Droppable 객체를 삭제합니다.

3. Droppables.findDeepestChild(drops)
- drops 루프를 돌면서 drops에서 가장 먼저 등록한 Droppable 객체들 중에서 가장 상위에 있는 Droppable 객체를 찾는 메소드입니다. (의도는?)

4. Droppables.isContained(element, drop)
- 인자로 받는 element의 부모노드가 drop의 containment(받아들이기로 한 element) 목록에 있는 지 여부를 리턴합니다.

5. Droppables.isAffected(point, element, drop)
- 인자로 받는 element가 인자로 받는 drop(Droppable)에 Drop이 된 것인지의 여부를 체크하는 메소드입니다.

1. drop.element와 달라야하고,
   
2. drop._containers가 있는 경우 여기에 속해야하고,
   
3. drop.accept가 있는 경우 element의 className중 하나가 해당해야하고,
   
4. drop.element의 안에 인자로 받는 point의 위치가 속해야 합니다.

6. Droppables.activate(drop) [Droppables.deactivate(drop)]
- active[deactive]가 된 경우, drop.hoverclass가 있다면 drop.element에 hoverclass를 설정[제거]하고 last_activate 값을 설정[null로 설정]합니다.

※ show, fire, reset 메소드의 경우 Draggable에서 호출되는 메소드입니다.
7. Droppables.show(point, element)
- element의 Drop에 해당하는 Droppable이 있으면 hover 이펙트를 발생시킵니다.

1. 인자로 받은 element가 Drop되었는지를 체크(isAffected())하여 affected에 담습니다.
   
2. affected된 Droppable 중에서 가장 상위의 element(findDeepestChild()를 사용하여)를 찾습니다.
   
3. 해당하는 Droppable을 activate시킵니다.

8. Droppables.fire(event, element) - onDrop 옵션을 가지고 있는 경우 onDrop 이벤트를 실행시킵니다.
9. Droppables.reset() - 초기화(deactivate) 시킵니다.

  Draggables
Draggables객체들을 관리하는 클래스입니다.

  Attribute
Draggables.drags: Array - draggable을 저장합니다.
Draggables.observers: Array -
activeDraggable - 현재 활성화되어 있는 Draggable을 가르키는 변수입니다.

  Method
1. Draggables.register(draggable)
- draggable을 인자로 받아서 drags에 추가합니다.
- drggable이 처음 등록되는 경우 document의 mouseup/mousemove/keypress 이벤트 핸들러로 eventMoueUp/eventMouseMove/eventKeypress 메소드를 등록합니다.

2. Draggables.unregister(draggable) -
- 인자로 받는 draggable을 drags에서 삭제합니다.
- 모든 draggable이 삭제되는 경우, document의 mouseup/mousemove/keypress 이벤트에 등록된 핸들러들을 모두 삭제합니다.

3. Draggables.activate(draggable)
- Draggable에서 호출되며, (delay 옵션이 있는 경우 dealy 옵션 뒤에) activeDraggable을 설정합니다.

4. Draggables.deactivate() - activeDraggable을 삭제합니다.(null처리)

※ 2에서 등록하였던 mouseup/mousemove/keypress 이벤트에 따라서, (activeDraggable이 있는 경우)activeDraggable에 해당하는 이벤트를 전달하는 역할을 합니다.
5. Draggables.updateDrag(event)
6. Draggables.endDrag(event)
7. Draggables.keyPress(event) 

※ 8, 9, 10, 11은 Draggables.observers와 관련된 메소드들로 Draggable에서 onStart/End/Drag 이벤트가 발생됬을 때, 해당하는 이벤트를 듣기 위한 구조입니다.
8. Draggables.addObserver(observer)
9. Draggables.removeObserver(element)
10. Draggables.notify(eventName, draggable, event)
- notify는 Draggable에서 호출되는 메소드로 onStart/onEnd/onDrag 이벤트가 발생한경우 observer에서 해당하는 이벤트를 관차하는 observer가 있는 경우 observer의 callback을 호출한 후 draggable의 등록된 callback을 호출합니다.
11. Draggables._cacheObserverCallbacks()

  Draggable
Drag되는 (Draggable)객체 입니다.

Creation

new Draggable('id_of_element', [options]);

options항목은 다음과 같습니다.

• handle - v1.0에서는 draggable할 element의 레퍼런스와 id를 인자로 받습니다. v1.5에서는 css 클래스 스트링으로 사용됩니다.
  
• revert :boolean - true인 경우, 시작점으로 돌아갑니다. function이 들오올 수 있습니다.(since v1.5) 디폴트 값은 false입니다.
  
• snap - true인 경우, snapping(달려들어 무는)이 발생합니다. 디폴트 값은 false입니다.
  
• zindex - draggable할 item의 zindex를 정의합니다.
  
• constraint - 'horizontal' 또는 'vertical'이 설정되는 경우, 수평/수직으로만 이동하도록 설정됩니다.
  
• ghosting :boolean - Drag~Drop이 진행되는 동안 자신의 위치에 clone object를 남겨둡니다.
  
• starteffect - Drag가 시작될 때, 적용할 이펙트를 정의합니다. 디폴트로 투명 이펙트(Opacity)를 실행합니다.
  
• reverteffect - Drag를 하다 되돌아가는 경우(Droppable영역이 아닌 지역에서 릴리즈했을 때)에 적용할 이펙트를 정의합니다. 디폴트 값으로는 시작점 포인트로 직선 이동하는 이펙트(Move)를 실행합니다.
  
• endeffect - Drag가 종료될 때, 적용할 이펙트를 정의합니다. 디폴트로 투명 이펙트(Opacity)를 실행합니다.
  

options에 설정되는 callback function입니다.

• change - Drag로 인하여 Draggable의 위치가 변경된 경우 발생합니다.
  

  Attribute
Draggable.drags: Array - draggable을 저장합니다.
Draggable.observers: Array - observer할 object들을 저장합니다.
activeDraggable - 현재 활성화되어 있는 Draggable을 가르키는 변수입니다.
dragging: boolean - dragging이 진행 중인지를 저장하는 변수입니다.

  Method
1. destroy()
2. currentDelta() - Draggable element의 left/top 위치를 리턴합니다.
3. initDrag(event)
- Draggable에 mousedown 이벤트가 발생한 경우 호출됩니다.
- draggable에 포함되는치, form element인지를 체크한 후, 현재의 마우스 위치와 실제 화면상의 위치 값을 저장한 후 Draggables.activate를 호출합니다.

4. startDrag(event)
- Draggable.updateDrag에서 호출됩니다.

1. dragging 값을 true로 설정합니다.
   
2. zindex, ghosting, scroll과 관련된 option이 있는 경우 해당 option과 관련된 작업을 수행합니다.
   
3. Draggables에 onStart이벤트가 발생했음을 알립니다.
4. options에 starteffect가 있는 경우 starteffect를 수행합니다.
   

5. updateDrag(event, pointer)
- Draggables.updateDrag에서 document의 mousemove 이벤트에 등록된 updateDrag에 의해서 호출됩니다.

1. this.dragging이 설정되어 있지 않은 경우 startDrag를 호출합니다.
   
2. Droppables.show를 호출하여 현재 해당하는 Droppable이 있는 경우에 대한 처리를 수행합니다.
   
3. Draggable을 이동시킵니다.
   
4. options.scroll과 관련된 항목을 처리합니다.

6. finishDrag(event, success)
- mouseup 또는 esc키가 눌린 경우 호출됩니다.

1. this.dragging을 false로 설정합니다.
   
2. mouseup인 경우, Droppables.fire를 호출하여 Drop 이벤트에 대한 처리를 수행하게 합니다.
   
3. Draggables.notify를 호출해서 onEnd이벤트가 발생했음을 알립니다.
   
4. revert인 경우, startDrag시 저장하였던 시작점으로 복귀시킵니다.
   
5. drag가 완료되었으므로 zindex를 복원시킵니다.
   
6. endeffect설정이 되어있으면 이를 호출해줍니다.
   
7. Draggables.deactivate를 호출하여서 활성중인 Draggable이 없음을 설정합니다.

7. keyProcess(event) - esc키가 눌린 경우, finishDrag를 호출합니다.
8. endDrag(event) - mouseup이벤트가 발생한 경우, stopScrolling()과 finishDrag를 호출합니다.
9. draw(point)  - mouse 이동에 따른 draggable의 이동 처리를 수행합니다. (repaint코드라고 보시면 될 듯)
10. stopScrolling()
11. startScrolling(speed)
12. scroll()
13. _getWindowScroll(w)

※ scrolling의 경우 제가 정확하게 파악하지 못해서 생략했습니다. ^^;;


관련링크
  Script.aculo.us - Draggable, Draggables, Droppables