Flex Drag Event 에 대한 이해 - (1) DragEvent 의 type

 
Flex Drag Event 에 대한 이해.

Flex SDK 4.5
2011.10.17

1. Drag Event 의 Type에 대한 이해

Drag를 시킬때 발생하는 DragEvent에 대해서 알아봅겠습니다.

DragEvent에는 type 이라는것이 있는데요.
이 type이라는 것은 DragEvent에서 발생할 수 있는 Event의 역활을 의미합니다.
이 type에는 아무것이나 써도 동작을 할 수 있지만 보통은 DragEvent 내부에 있는 const 상수들을 type으로 사용합니다.

그럼 DragEvent에서 발생할 수 있는 이 type에는 어떤것들이 있는지 아시나요?
DragEvent에서 발생할 수 있는 type은 총 6가지가 있는데요
  드래그를 시작할때 발생하는 DRAG_START type, 
  드랍하려는 화면으로 들어가면 발생하는 DRAG_ENTER type, 
  드랍하려는 화면 위에서 움직일때 발생하는 DRAG_OVER type, 
  드랍하지 않고 드랍하려는 화면에서 나가면 발생하는 DRAG_EXIT type,
  그리고 드랍하려는 화면위에서 드랍할때 발생하는 DRAG_DROP type 과, 
  마지막으로 어느 곳에서든 드래그를 종료하면 발생하는 DRAG_COMPLETE type 입니다.

6가지 밖에 안되는데 이렇게 쓰고 보니 꽤나 복잡해 보이죠?
이 6가지 DragEvent 의 type은 다시 2가지로 나뉠 수 있습니다.
그건 "Drag&Drop 시키는 쪽"과 "Drag&Drop 당하는 쪽"인데요.

"Drag&Drop 시키는 쪽"에서 발생하는 DragEvent는 DRAG_START 와 DRAG_COMPLETE 입니다.
각각의 역활은 이름처럼 간단합니다.
드래그를 시키는 쪽에서는 드래그가 시작되었고 드래그가 끝났다라는 2가지 Event 만 알면되기 때문입니다.
드래그를 한 후에 드랍이 성공했는지 실패했는지는 알 필요가 없기 떄문이죠.
그래서 List 컴포넌트를 보면 dragStartHandler와 dragCompleteHandler가 같이 있습니다.
그리고 나머지 dragHandler들은 한참 아래에서 등장합니다.
List 컴포넌트를 보면 왜 같은 DragEvent handler들인데도 서로 떨어져있었을까 하고 궁금하셨던 분이라면
궁금증이 풀리셨을겁니다.

그럼 나머지 "Drag&Drop 당하는 쪽"에서 발생하는 DragEvent 들을 알아볼까요?
드랍 당하는 쪽에서는 DRAG_ENTER, DRAG_OVER, DRAG_EXIT, DRAG_DROP 이 있습니다.
드랍 당하는 쪽이니 DRAG_DROP이야 DragEvent를 사용하는 목적이기때문에 당연히 있는것이죠
그럼 나머지 type들은 어떤 것일까요?

DRAG_ENTER type 은 드랍 당하려는 객체에 드래그가 막 접근하였음을 의미합니다.
보통 DRAG_ENTER type은 드래그 중인 객체가 드랍당하는 객체에 드랍당할 수 있는지를 알아보기 위해서 사용합니다.
드랍당하려는 객체가 허락하는 드래그 객체들을 확인한 후에 드랍할 수 있다 라는 허가를 내어주는데요
그래서 보통 DRAG_ENTER handler에서 DragManager.acceptDragDrop() 을 많이 사용합니다.

DRAG_OVER type 은 드랍 당하려는 객체 위에 올바른 드래그 중인 객체가 움직일때 발생하는데요
올바른 드래그 중인 객체라는 것은 DRAG_ENTER에서 DragManager.acceptDragDrop() 로 허용이 된 객체를 의미합니다.
허용이 되지 않았다면 이 DRAG_OVER type의 event는 발생하지 않겠지요.
DRAG_OVER는 List 컴포넌트같은 경우에서 dropIndicator를 표현할때에 사용합니다.
dropIndicator란 간단하게 drop을 당하려는 위치를 표현해주는 객체입니다.
윈도우즈 탐색기를 사용할때에 파일이나 폴더를 탐색기 왼쪽 트리 구조의 폴더 목록에 드래그드랍하면 파란색으로 나타나는 녀석이 이 dropIndicator라고 생각하시면 됩니다.

DRAG_EXIT type은 DRAG_ENTER가 발생한 후에 드랍하지 않고 나갈 경우에 발생합니다.
List 컴포넌트에서는 dropIndicator를 사라지게 하거나 focus를 해제할때에 사용을 합니다.

마지막으로 DRAG_DROP type입니다.
이 type이 DragEvent 를 쓰는 목표죠.
바로 드랍을 하였을때에 발생하는 event type입니다.
드래그드랍을 통해서 객체를 이동하거나 복사를 한다던지 다른 여러가지 사용자 정의 기능들을 드래그드랍을 통해 구현하려고 할때에 이 type에 handler를 걸어서 원하는 기능을 수행하곤 합니다.

이제 type에 대해서는 이해가 되시나요?
결과적으로 우리가 DragEvent를 사용하는 목적은 드래그&드랍을 통해 원하는 기능을 수행하고자 함인데요
드랍을 하기 위해서는 그외의 5가지의 처리가 같이 존재할 수 있다는것을 DragEvent의 type들을 통해서 배울 수 있었습니다.

오늘 알아본 DragEvent의 type외에도 DragEvent는 여러가지 용도로 사용하고 있습니다.
한번 어떤 용도로 사용하는 지 알아보시고 왜 그렇게 되는지 알아보시는것도 많은 도움이 되실겁니다.

^^.

---

DragEvent Type의 종류

DragEvent.DRAG_START, DragEvent.DRAG_COMPLETE,
DragEvent.DRAG_ENTER, DragEvent.DRAG_OVER, DragEvent.DRAG_DROP, DragEvent.DRAG_EXIT

DragEvent type의 분류

Drag&Drop 시키는 쪽

DragEvent.DRAG_START, DragEvent.DRAG_COMPLETE

Drag&Drop 당하는 쪽

DragEvent.DRAG_ENTER, DragEvent.DRAG_OVER, DragEvent.DRAG_DROP, DragEvent.DRAG_EXIT

"Drag&Drop 시키는 쪽"에서는 DragEvent 가 "시작"해서 "끝"나는 것으로 해결이 됩니다.

1. Drag가 시작됨 (DragEvent.DRAG_START)
2. Drag가 종료됨 (DragEvent.DRAG_COMPLETE)

"Drag&Drop 당하는 쪽"에서는 DragEvent 는 Drag 중인 것이 "들어오고", "움직이고", "나가고", "놓여지고"로 됩니다.

1. Drag 중인 것이 들어오고 (DragEvent.DRAG_ENTER)
2. Drag 중인 것이 움직이고 (DragEvent.DRAG_OVER)
3. Drag 중인 것이 나가고 (DragEvent.DRAG_EXIT)
4. Drag 중인 것이 놓여지고 (DragEvent.DRAG_DROP)

---