[Flex]수동으로 드래그앤 드랍 지원 추가하기

Classes used in drag-and-drop operations

You use the following classes to implement the drag-and-drop operation:

클래스	기능
DragManager	드래그 앤 드랍 동작을 관리한다. 예를 들어 doDrag() 메소드는 드래그 동작을 시작한다.
DragSource	드래그 될 데이터를 가지고 있다. 또한 데이터가 요구될때 호출되는 핸들러를 추가하는 기능과 같은 추가적인 드래그 관리 기능을 제공한다.
DragEvent	모든 드래그 앤 드랍 이벤트를 표현하기 위한 이벤트 오브젝트.

Drag initiator의 드래그 앤 드랍 이벤트

A component that acts as a drag initiator handles the following events to manage the drag-and-drop operation:

Drag initiator 이벤트	설명	핸들러 필요여부	리스트 기반 컨트롤에 의한 구현 여부
mouseDown 과 mouseMove	mouseDown이벤트는 사용자가 마우스를 이용하여 컨트롤을 선택하고 마우스 버튼을 눌렀을때 발생한다. mouseMove 이벤트는 마우스를 움직였을때 발생한다.  대부분의 컨트롤은 이 들중 하나의 이벤트에 맞게 드래그 앤 드랍 을 초기화 해야 한다. 예제는 Example: Handling the dragOver and dragExit events for the drop target를 참조.	필요, 리스트 컨트롤이 아닌 경우	구현안됨
dragStart	사용자가 드래그 동작을 시작하면 리스트 기반 컴포넌트에서 발생한다.  이 이벤트는 리스트 기반 컨트롤 내부적으로 사용된다. 따라서 드래그 앤 드랍을 구현하기 위해서 처리하면 안된다. 만약 드래그 앤 드랍 처리의 시작을 컨트롤하고 싶으면 mouseDown 나 mouseMove 이벤트를 사용해라.	필요, 리스트 컨트롤인 경우	구현됨
dragComplete	드래그 처리가 끝났을때 발생한다. 즉 드래그 데이타가 drop target에 드랍 되었거나 드래그 앤 드랍 처리가 드랍 없이 종료되었을때 발생한다.  이 이벤트는 드래그 앤 드랍의 최종 정리작업에 사용될 수 있다. 예를 들면, 만약 사용자가 데이터를 한 컴포넌트에서 다른 컴포넌트로 옮긴 후, 이 이벤트를 drag initiator의 아이템을 지우는 데 사용할 수 있다.  예제는 Example: Moving and copying data for a nonlist-based control 참조.	필요 없음	구현됨

컴포넌트에 드래그 앤 드랍 기능을 추가할때는 mouseDown 또는 mouseMove이벤트에 대한 핸들러를 반드시 구현해야 하며 추가적으로 dragComplete 이벤트를 구현할 수 있다. 리스트 기반 컨트롤에 대해 dragEnabled 속성을 true로 설정했을 때는 플렉스가 자동적으로 dragStart 이벤트와 dragComplete 이벤트에 대한 핸들러를 추가한다.

주의: dragStart이벤트에 대한 핸들러를 추가해서는 안된다. 이 것은 플렉스가 내부적으로 사용하는 이벤트 이다.

Drop target 의 드래그 앤 드랍 이벤트

To use a component as a drop target, you handle the following events:

Drop target 이벤트	설명	핸들러  필요여부	리스트 기반 컨트롤에 의한 구현 여부
dragEnter	drag indicator 가 drop target 의 밖에서 drop target 의 위로 이동할때 발생. drop target이 되기 위해서 컴포넌트는 반드시 이 이벤트에 대한 이벤트 핸들러를 정의해야 한다. 이벤트 핸들러는 드래그 된 데이터가 수용가능한 포맷인지 판단한다. 드랍을 허용하기 위해서 이벤트 핸들러는 DragManager.acceptDragDrop() 메소드를 호출한다. drop target이 dragOver, dragExit, and dragDrop 이벤트를 받기위해서는DragManager.acceptDragDrop() 메소드를 반드시 호출해야 한다.  핸들러 안에서 해당 컴포넌트가 드래그 처리를 받아들일 수 있다는 것을 알리기 위한 시각적인 피드백을 사용자에게 주기 위해 drop target의 모양을 변경할 수 있다. 예를 들면 drop target의 테두리를 그리거나  drop target에 포커스를 줄 수 있다. 예제는 Example: Simple drag-and-drop operation for a nonlist-based control 참조.	필요	구현됨
dragOver	dragEvent 이후에 사용자가 마우스를 target 에서 움직이는 동안 발생한다. 이 이벤트를 드랍 처리를 수락하기 이전에 drop target 안에서 다양한 위치에 데이터를 추가하기 또는 드래그 앤 드랍 동작이 드래그 데이터를 복사 혹은 이동인지를 판단하기 위해 키보드 입력을 읽기 또는 드래그 앤 드랍 처리의 유형에 따라 다른 시각적 피드백을 제공하기와 같은 추가적인 로직을 처리하아 위해 사용할 수 있다. 예제는 Example: Handling the dragOver and dragExit events for the drop target 참조.	필요없음	구현됨
dragDrop	사용자가 drop target위에서 마우스를 놓을 때 발생한다. 드래그 데이터를  drop target에 추가하기 위해 이 이벤트를 처리한다. 예제는 Example: Simple drag-and-drop operation for a nonlist-based control 참조.	필요	구현됨
dragExit	사용자가  drag indicator를 drop target 밖으로 이동했으나 타겟에 데이터를 드랍하지 않았을 때 발생한다. 이 이벤트는 dragEnter 이벤트나 혹은 다른 이벤트에 의해  drop target의 모양이 변경되었을때  drop target의 보통상태로 되돌리기 위해 사용될 수 있다. 예제는 Example: Handling the dragOver and dragExit events for the drop target 참조.	필요없음	구현됨

비 리스트기반 컴포넌트에 드래그 앤 드랍 지원을 추가할때는 반드시  dragEnter 와 dragDrop 이벤트핸들러를 구현해야 하고 추가적으로 다른 이벤트 핸들러를 추가할 수 있다.  리스트 기반 컨트롤의 dropEnabled 속성을 true로 설정하면 , 플렉스는 자동적으로 모든 이벤트에 대한 핸들러를 추가해 준다. 

드래그 앤 드랍 동작

아래 단계들은 드래그 앤 드랍 처리를 정의 한다. 

1. 컴포넌트는 아래의 방법중 하나로 드래그앤 드랍 initiator 가 된다:

   • dragEnabled=true 인 리스트 기반 컴포넌트 List

     사용자가 클릭하고 컴포넌트 위의 마우스를 이동하면, 플렉스는 자동적으로 해당 컴포넌트를 initiator로 만든다.

   • 비 리스트 기반 컴포넌트 또는 dragEnabled=false인 리스트 기반 컴포넌트

     컴포넌트는 사용자의 드래그 시작의도를 감지해야 하며, 명시적으로 initiator가 되어야 한다. 명백하게 mouseMove 또는 mouseDown 이벤트가 드래그 앤 드랍을 시작하기위해 사용된다. 

     그리고 나서 컴포넌트는 드래그될 데이터를 포함하는 mx.core.DragSource 클래스의 인스턴스를 생성하고 데이터 포맷을 정의한다. drop target은 그 포맷을 이 drop target과 호환 가능한지를 판단하기 위해 사용할 수 있다.

     이후에 컴포넌트는 mx.managers.DragManager.doDrag() 메소드를 호출해서 드래그 앤 드랍 처리를 초기화 한다.

2. 마우스 버튼이 눌려있는동안 사용자는 마우스를 어플리케이션 여기저기로 움직인다. 이때 플렉스는 drag indicator 이미지를 어플리케니션내에서 보여준다.

   주의: drag indicator가 drag target위에 있지 않을때 버튼을 놓으면  드래그 앤 드랍 처리가 종료된다. 플렉스는 drag initiator에  DragComplete 이벤트를 발생 시키고, DragManager.getFeedback() 메소드는 DragManager.NONE를 리턴한다.

3. 사용자가 drag indicator를 플렉스 컴포넌트 위로 이동하면, 플렉스는 dragEnter 이벤트를 컴포넌트로 발생시킨다.

   • dragEnabled=true 인 리스트 기반 컴포넌트 List

     플렉스는 컴포넌트가 drop target이 될 수 있는지 확인한다.

   • 비 리스트 기반 컴포넌트 또는 dragEnabled=false인 리스트 기반 컴포넌트

     컴포넌트는  drop target이 되기 위해서 dragEnter 이벤트를 위한 이벤트 핸들러를 정의해야 한다.

   dragEnter 이벤트 핸들러는 드래그된 데이터가 수용가능한 포맷으로 되어 있는지를 확인하이 위해 DragSource 오브젝트를 검사할 수 있다. 드롭을 허용하기 위해서 이벤트 핸들러는 DragManager.acceptDragDrop() 메소드를 호출한다.  drop target 컴포넌트가   dragOver, dragExit 그리고 dragDrop 이벤트들을 받기 위해서는 DragManager.acceptDragDrop() 메소드를 호출해야 한다.

   • 만약 drop target이 드롭을 허용하지 않으면, 플렉스는 마우스 아래의 모든 DisplayObject 컴포넌트를 확인한다. 플렉스는 깊이 순으로 어떤 컴포넌트가 드롭된 데이터를 받을 수 있는지 확인한다. 

   • 만약 drop target이 드롭을 허용하면, 플렉스는 사용자가 drag indicator를 drag target위로 이동할 때마다 dragOver이벤트를 발생시킨다.

4. (선택적으로) drop target은 dragOver 이벤트를 처리할 수 있다. 예를 들면, drop target은 이 이벤트 핸들러를 자신을 포커스 하기 위해 사용할 수 있다. 또한 어디에 데이터가 삽입되는지를 시각적으로 보여주기 위해 사용될 수 있다.

5. (선택적으로) 만약 사용자가  drop target위에 드랍을 하지 않기로 결정하고 drag indicator를 drop target밖으로 버튼을 놓지 않은 채로 이동 시키면, 플렉스는  dragExit 이벤트를 drop target에 발생시킨다.  drop target 선택적으로 이 이벤트를 처리할 수 있다. 예를 들면  dragOver이벤트 핸들러에 의해 수행된 것을 실행 취소 하는것이다.

   
   

6. 만약 사용자가 drop target 위에서 마우스 버튼을 놓으면, 플렉스는  dragDrop이벤트를 drop target에 발생시킨다.

   • dragEnabled=true 인 리스트 기반 컴포넌트 List

     플렉스가 자동으로 드래그 데이터를 drop target에 추가한다.

   • 비 리스트 기반 컴포넌트 또는 dragEnabled=false인 리스트 기반 컴포넌트

     drop target은 drop target에 드래그 된 데이터를 추가할 dragDrop이벤트를 핸들러을 위한 dragDrop 이벤트에 대한 리스너를 반드시 정의해야 한다.

7. (선택적으로) 드랍 처리가 끝나면, 플렉스는 dragComplete 이벤트를 발생시킨다. drag initiator는 이 이벤트를 처리할 수 있다; 예를 들어, 이동 시키는 경우에는 드래그 된 데이터를 drag initiator로 부터 삭제한다.

   • dragEnabled=true 인 리스트 기반 컴포넌트 List

     만약 이동 이면, 플렉스는 자동으로 드래그된 데이터를 drag initiator에서 지운다.

   • 비 리스트 기반 컴포넌트 또는 dragEnabled=false인 리스트 기반 컴포넌트

     drag initiator는 마무리를 위한 필요한 모든 처리를 끝낸다. 이동 이면 이벤트 핸들러는 드래그된 데이터를 drag initiator에서 지워야 한다. dragComplete 이벤트 핸들러의 작성예시는 Example: Moving and copying data for a nonlist-based control 참조.

Example: Simple drag-and-drop operation for a nonlist-based control

The following example lets you set the background color of a Canvas container by dropping either of two colors onto it. You are not copying or moving any data; instead, you are using the two drag initiators as a color palette. You then drag the color from one palette onto the drop target to set its background color.

The drag initiators, two Canvas containers, implement an event handler for the mouseDown event to initiate the drag and drop operation. This is the only event required to be handled by the drag initiator. The drop target is required to implement event handlers for the dragEnter and dragDrop events.

<?xml version="1.0"?>
<!-- dragdrop\DandDCanvas.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    backgroundColor="white">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[

        import mx.core.DragSource;
        import mx.managers.DragManager;
        import mx.events.*;
        import mx.containers.Canvas;

        // Initializes the drag and drop operation.
        private function mouseMoveHandler(event:MouseEvent):void {
            
            // Get the drag initiator component from the event object.
            var dragInitiator:Canvas=Canvas(event.currentTarget);
            
            // Get the color of the drag initiator component.
            var dragColor:int = dragInitiator.getStyle('backgroundColor');

            // Create a DragSource object.
            var ds:DragSource = new DragSource();

            // Add the data to the object.
            ds.addData(dragColor, 'color');

            // Call the DragManager doDrag() method to start the drag. 
            DragManager.doDrag(dragInitiator, ds, event);
        }

        // Called when the user moves the drag indicator onto the drop target.
        private function dragEnterHandler(event:DragEvent):void {

            // Accept the drag only if the user is dragging data 
            // identified by the 'color' format value.
            if (event.dragSource.hasFormat('color')) {

                // Get the drop target component from the event object.
                var dropTarget:Canvas=Canvas(event.currentTarget);
                // Accept the drop.
                DragManager.acceptDragDrop(dropTarget);
            }
        }
                
        // Called if the target accepts the dragged object and the user 
        // releases the mouse button while over the Canvas container. 
        private function dragDropHandler(event:DragEvent):void {

            // Get the data identified by the color format 
            // from the drag source.
            var data:Object = event.dragSource.dataForFormat('color');
            // Set the canvas color.
            myCanvas.setStyle("backgroundColor", data);
        }    
        ]]>
    </fx:Script>

    <!-- A horizontal box with red and green canvases that the user can drag. -->
    <mx:HBox>
        <mx:Canvas 
            width="30" height="30" 
            backgroundColor="red" 
            borderStyle="solid" 
            mouseMove="mouseMoveHandler(event);"/>
        <mx:Canvas 
            width="30" height="30" 
            backgroundColor="green" 
            borderStyle="solid" 
            mouseMove="mouseMoveHandler(event);"/>
    </mx:HBox>

    <mx:Label text="Drag a color onto the Canvas container."/>

    <!-- Handles dragEnter and dragDrop events to allow dropping. -->
    <mx:Canvas id="myCanvas" 
        width="100" height="100" 
        backgroundColor="#FFFFFF" 
        borderStyle="solid" 
        dragEnter="dragEnterHandler(event);" 
        dragDrop="dragDropHandler(event);"/>
        
    <mx:Button id="b1" 
        label="Clear Canvas" 
        click="myCanvas.setStyle('backgroundColor', '0xFFFFFF');"/>
</s:Application>
The executing SWF file for the previous example is shown below:

The following sections describe the event handlers for the mouseDown, dragEnter, and dragDrop events.

Writing the mouseDown event handler

The event handler that initiates a drag-and-drop operation must do two things.

1. Create a DragSource object and initialize it with the drag data and the data format.

   The DragSource object contains the drag data and a description of the drag data, called the data format. The event object for the dragEnter and dragDrop events contains a reference to this object in their dragSource property, which allows the event handlers to access the drag data.

   You use the DragSource.addData() method to add the drag data and format to the DragSource object, where the addData() method has the following signature:

   addData(data:Object, format:String):void

   The format argument is a text string such as "color", "list data", or "employee record". In the event handler for the dragEnter event, the drop target examines this string to determine whether the data format matches the type of data that the drop target accepts. If the format matches, the drop target lets users drop the data on the target; if the format does not match, the target does not enable the drop operation.

   One example of using the format string is when you have multiple components in your application that function as drop targets. Each drop target examines the DragSource object during itsdragEnter event to determine if the drop target supports that format. For more information, see Handling the dragEnter event.

   Note: List-based controls have predefined values for the format argument. For all list controls other than the Tree control, the format String is "itemsByIndex". For the Tree control, the format String is "treeItems". For previous versions of Flex, list-based controls used a format String of "items". For more information, see Using drag-and-drop with list-based controls.

   If you drag large or complex data items, consider creating a handler to copy the data, and specify it by calling the DragSource.addHandler() method instead of using the DragSource.addData()method. If you do this, the data does not get copied until the user drops it, which avoids the processing overhead of copying the data if a user starts dragging data but never drops it. The implementation of the list-based classes use this technique.

2. Call the DragManager.doDrag() method to start the drag-and-drop operation.

   The doDrag() method has the following signature:

   doDrag(dragInitiator:IUIComponent, dragSource:DragSource, mouseEvent:MouseEvent, 
       dragImage:IFlexDisplayObject = null, xOffset:Number = 0, yOffset:Number = 0, 
       imageAlpha:Number = 0.5, allowMove:Boolean = true):void

   The doDrag() method requires three arguments: a reference to the component that initiates the drag operation (identified by the event.currentTarget object); the DragSource object that you created in step 1, and the event object passed to the event handler.

   Optional arguments specify the drag indicator image and the characteristics of the image. For an example that specifies a drag indicator, see Example: Specifying the drag indicator by using the DragManager.

Handling the dragEnter event

Flex generates a dragEnter event when the user moves the drag indicator over any component. A component must define a handler for a dragEnter event to be a drop target. The event handler typically performs the following actions:

• Use the format property in the DragSource object to determine whether the drag data is in a format accepted by the drop target.

• If the drag data is in a compatible format, the handler must call the DragManager.acceptDragDrop() method to enable the user to drop the data on the drop target.

• If the drag data is not in a compatible format, do not call the DragManager.acceptDragDrop() method. If the event handler does not call this method, the user cannot drop the data and the drop target will not receive the dragOver, dragExit, and dragDrop events.

• Optionally, perform any other actions necessary when the user first drags a drag indicator over a drop target.

The value of the action property of the event object for the dragEnter event is DragManager.MOVE, even if you are doing a copy. This is because the dragEnter event occurs before the drop target recognizes that the Control key is pressed to signal a copy.

The Flex default event handler for the dragOver event for a list-based control automatically sets the action property. For nonlist-based controls, or if you explicitly handle the dragOver event for a list-based control, use the DragManager.showFeedback() method to set the action property to a value that signifies the type of drag operation: DragManager.COPY, DragManager.LINK, DragManager.MOVE, or DragManager.NONE. For more information on the dragOver event, see Example: Handling the dragOver and dragExit events for the drop target.

Handling the dragDrop event

The dragDrop event occurs when the user releases the mouse to drop data on a target, and the dragEnter event handler has called the DragManager.acceptDragDrop() method to accept the drop. You must define a handler for the event to add the drag data to the drop target.

The event handler uses the DragSource.dataForFormat() method to retrieve the drag data. In the previous example, the drag data contains the new background color of the drop target. The event handler then calls setStyle() to set the background color of the drop target.

Example: Handling drag and drop events in a list-based control

Flex automatically defines default event handlers for the drag-and-drop events when you set dragEnabled or dropEnabled property to true for an MX list-based control. You can either use these default event handlers, which requires you to do no additional work in your application, or define your own event handlers.

There are three common scenarios for using event handlers with the list-based controls:

Use the default event handlers

 

When you set dragEnabled to true for a drag initiator, or when you set dropEnabled to true for a drop target, Flex handles all drag-and-drop events for you. You only have to define your own dragDrop event handler when you want to copy data as part of the drag-and-drop operation and the drop target uses a different data format. For more information, see Moving and copying data.

Define your own event handlers

 

If you want to control the drag-and-drop operation for a list-based control, you can explicitly handle the drag-and-drop events, just as you can for any component. In this scenario, set the dragEnabled property to false for a drag initiator, or set the dropEnabled property to false for a drop target. For more information on handling these events, see Example: Simple drag-and-drop operation for a nonlist-based control.

Define your own event handlers and use the default event handlers

 

You might want to add your own event handler for a drag-and-drop event, and also use the build in drag-and-drop handlers. In this case, your event handler executes first, then the default event handler provided by Flex executes. If, for any reason, you want to explicitly prohibit the execution of the default event handler, call theEvent.preventDefault() method from within your event handler.

Note: If you call Event.preventDefault() in the event handler for the dragComplete or dragDrop event for a Tree control when dragging data from one Tree control to another, it prevents the drop.

Because of the way data to a Tree control is structured, the Tree control handles drag and drop differently from the other list-based controls. For the Tree control, the event handler for the dragDropevent only performs an action when you move or copy data in the same Tree control, or copy data to another Tree control. If you drag data from one Tree control and drop it onto another Tree control to move the data, the event handler for the dragComplete event actually performs the work to add the data to the destination Tree control, rather than the event handler for the dragDrop event, and also removes the data from the source Tree control. This is necessary because to reparent the data being moved, Flex must remove it first from the source Tree control.

 

Therefore, if you callEvent.preventDefault() in the event handler for the dragDrop or dragComplete events, you implement the drop behavior yourself. For more information, see Example: Moving and copying data for a nonlist-based control.

 

The following example defines an event handler for the dragDrop event that accesses the data dragged from one DataGrid control to another. This event handler is executed before the default event handler for the dragDrop event to display in an Alert control the Artist field of each DataGrid row dragged from the drag initiator to the drop target:

<?xml version="1.0"?>
<!-- dragdrop\SimpleDGToDGAlert.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="650"
    creationComplete="initApp();">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[        
            import mx.events.DragEvent; 
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            
            private function initApp():void {
              srcgrid.dataProvider =  new ArrayCollection([
                {Artist:'Carole King', Album:'Tapestry', Price:11.99},
                {Artist:'Paul Simon', Album:'Graceland', Price:10.99},
                {Artist:'Original Cast', Album:'Camelot', Price:12.99},
                {Artist:'The Beatles', Album:'The White Album', Price:11.99}
              ]);
                
                destgrid.dataProvider = new ArrayCollection([]);
            }

            // Define the event listener.
            public function dragDropHandler(event:DragEvent):void {    
                // dataForFormat() always returns an Vector.<Object>
                // for the list-based controls 
                // in case multiple items were selected.
                var dragObj:Vector.<Object>=
                    event.dragSource.dataForFormat("itemsByIndex") as Vector.<Object>; 

                // Get the Artist for all dragged albums.
                var artistList:String='';
                for (var i:Number = 0; i < dragObj.length; i++) { 
                    artistList+='Artist: ' + dragObj[i].Artist + '\n';
                }
                
                Alert.show(artistList);                
            }           
        ]]>
    </fx:Script>

    <s:HGroup>
        <s:VGroup>
            <s:Label text="Available Albums"/>
            <mx:DataGrid id="srcgrid" 
                allowMultipleSelection="true" 
                dragEnabled="true" 
                dropEnabled="true" 
                dragMoveEnabled="true">                
                <mx:columns>
                    <mx:DataGridColumn dataField="Artist"/>
                    <mx:DataGridColumn dataField="Album"/>
                    <mx:DataGridColumn dataField="Price"/>
                </mx:columns>    
            </mx:DataGrid>
        </s:VGroup>

        <s:VGroup>
            <s:Label text="Buy These Albums"/>
            <mx:DataGrid id="destgrid" 
                allowMultipleSelection="true" 
                dragEnabled="true" 
                dropEnabled="true" 
                dragMoveEnabled="true" 
                dragDrop="dragDropHandler(event);">                
                <mx:columns>
                    <mx:DataGridColumn dataField="Artist"/>
                    <mx:DataGridColumn dataField="Album"/>
                    <mx:DataGridColumn dataField="Price"/>
                </mx:columns>    
            </mx:DataGrid>
        </s:VGroup>
    </s:HGroup>

    <s:Button id="b1" 
        label="Reset"
        click="initApp();"/>
</s:Application>
The executing SWF file for the previous example is shown below:

Notice that the dataForFormat() method specifies an argument value of "itemsByIndex". This is because the list-based controls have predefined values for the data format of drag data. For all list controls other than the Tree control, the format String is "itemsByIndex". For the Tree control, the format String is "treeItems". 

For Spark controls only, the DragSource object also contains the index of the item in the drag initiator that was clicked by the mouse. The format string of the index is “caretIndex”. The index is relative to the items in the drag data. Therefore, if the drag data contains three items, the index is a value between 0 and 2.

 

Notice that the return value of the dataForFormat() method is a Vector of type Object. Because list-based controls let you select multiple items, the dataForFormat()method always returns a Vector for a list-based control, even if you are only dragging a single item.

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