[Flex] 드래그 앤 드랍에 관하여

드래그 앤 드랍에 관하여

Visual development environments typically let you manipulate objects in an application by selecting them with a mouse and moving them around the screen. Drag and drop lets you select an object, such as an item in a List control, or a Flex control such as an Image control, and then drag it over another component to add it to that component.

You can add support for drag and drop to all Flex components. Flex also includes built-in support for the drag-and-drop operation for certain controls such as the MX List, Tree, and DataGrid controls and the Spark List control, that automate much of the processing required to support drag and drop.

드래그 앤 드랍 처리에 관하여

드래그 앤 드랍 처리는 3개의 메인 단계를 가진다. 초기화, 드래깅, 드랍핑

초기화

 사용자는 마우스를 사용하여 플렉스 컴포넌트 혹은 플렉스 컴포넌트내의 아이템을 선택하고 나서 컴포넌트나 아이템을 마우스 버튼을 누른채로 이동시킴으로 드래그앤 드랍 처리를 시작한다. 예를 들면, 사용자는 리스트 컨트롤의 아이템을 마우스로 선택하고 마우스 버튼을 누른채로 마우스를 여러 픽셀만큼 이동 시킨다. 선택된 컴포넌트, 이 예시에서는 리스트 컨트롤이 drag initiator 이다.

드래깅

 여전히 마우스 버튼을 누른채로, 사용자는 마우스를 어플리케이션 주변으로 움직인다. 플렉스는 드래그 하는동안  drag indicator 라고 불리는 특정 이미지를 표시해 준다. Drag source 오브젝트( DragSource 형의 오브젝트)는 드래그 되는 동안 데이터를 포함하고 있다.

드랍핑

 사용자가 drag indicator를 다른 플렉스 컴포넌트위로 옮겼을때, 그 컴포넌트는 가능한 drag target이 된다. Drop target은 drag source 오브젝트가 가지고 있는 데이터가 타겟이 수용할 수 있는 포멧으로 되어 있는지 그래서 사용자가 그 데이타를 드랍할 수 있는지 검사한다.  만약 drop target이 해당 데이타가 수용가능한 형식이 아니라고 판단하면 drop target 은 드랍을 허용하지 않는다. 드래그 앤 드랍 처리는 데이타를  drag initiator로부터 drop target으로 복사하거나 이동할 수 있다. 성공적인 드랍으로 플렉스는 데이터를  drop target 에 추가하며, 이동의 경우에는 추가적으로 해당 데이터를 drag initiator로부터 삭제한다. 

아래 그림은 하나의 

리스트 컨트롤은 drag initiator로서의 기능을 보여주고 두 번째 리스트 컨트롤은 drop target으로서의 기능을 보여준다. 이 예제에서는 'Television' 리스트 아이템을 drag initiator 에서 drop target으로 이동하는 것을 보여준다.

하나의 컴포넌트가 drag initiator 와 drop target로서의 역할을 동시에 할 수 있다. 이것은 컴포넌트내에서 데이터를 이동할 수 있게 해준다. 아래 예제는  drag initiator이면서 동시에 drop target로서 동작하는 리스트 컨트롤을 보여준다. 

리스트 컨트롤를 

drag initiator 와 drop target로 지정하여 드래그 앤 드랍을 통해 컨트롤 내의 아이템들을 재 배치 할 수 있다.

For example, if you use a Canvas container as the drag initiator and the drop target, you can then use drag and drop to move controls in the Canvas container to rearrange them.

drag and drop 수행하기

드래그 앤 드랍은 이벤트 드리븐 방식이다. 컴포넌트를 drag initiator 혹은 drop target로 설정하기 위해 , dragDrop이나  dragEnter같은 특정 이벤트들에 대한 이벤트 핸들러를  작성해야 한다. 자세한 내용은 Manually adding drag-and-drop support를 참조.

몇몇의 드래그 앤 드랍을 자주 사용하는 컴포넌트들에 대해서 플렉스는 드래그 앤 드랍 처리를 자동으로 지원하기 위해 내장된 이벤트 핸들러들을 제공한다. 이 컨트롤들은 MX의 mx.controls.listClasses.ListBase 클래스와 Spark의 spark.components.supportClasses.ListBase 클래스와 같이 리스트 기반 컨틀롤로 불리는 클래스들의 서브 클래스 들인다. 자세한 내용은  Using drag-and-drop with list-based controls 참조.

이동이나 복사 동작을 위해서 리스트 기반 컨트롤들은 드래그 앤 드랍에서 필요로 하는 모든 이벤트들을 처리할 수 있다. 하지만 만약 다른 데이터 포맷을 사용하는 drop target 으로 데이터를 복사하고자 한다면, 이벤트 핸들러를 작성해야 한다. 자세한 내용은 Moving and copying data 참조.

(from http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64595-7fff.html)