Drag n' Drop spark List Itemrenders betwen components

Question

I'm trying to do some drag and drop between 2 spark List located in different components. Because my first attempt didn't work, I decide to Google it and read some more about DragAndDrop ... tried all the examples I could find but nothing seams to work for me.

So let's go to the point.

Component A has List1
Component B has List2

Component A - List 1 has dragEnabled="true" and mouseDown="initiateDrag(event)"

private function initiateDrag(e:MouseEvent):void{
    var dragInitiator:IUIComponent = e.target as IUIComponent;
    var de:DragSource = new DragSource;
    de.addData(dragInitiator, 'artist');
    DragManager.doDrag(dragInitiator, de, e);
}

By what I read, usind the mouseDown I'm starting a the drag event creating what kind of data I'm going to drag ... this case 'artist'

Component B - List 2 has dropEnabled="true", dragEnter="dragEnterHandler(event)" and dragDrop="dragDropHandler(event)"

private function dragEnterHandler(e:DragEvent):void{
    if(e.dragSource.hasFormat('artist')){
        DragManager.acceptDragDrop(List(e.currentTarget));
    }
}

Now, what I'm expecting was, when I drag the itemRender from Component A List 1 over Component B List 2 is to call the function dragEnterHandler(event), and it does ... but I was also expecting that the DragManager.acceptDragDrop(List(e.currentTarget)) whould change indicator from the "red cross" to the "green plus" and that's not happening ... and because of that, the dragged itemRender (proxi) moves back to its original list in this case it moves back to Component A List 1

I already spent hours and hours debugging and testing other approaches and none seams to work for me.

Is there anyone here familiarize with drag and drop between components that may help me?

Luis Pedro Ferreira Luis Pedro Ferreira · Accepted Answer · 2011-03-20T13:14:24

Well guys, looks like after 2 days and 4h later I got the solution :)

I was looking to this in a complete wrong way. When using Drag and Drop with List based components, the 'format' is always 'itemsByIndex' and I was trying to be accepted with 'artist' 'format'.

Problem: You have more than one List accepting data with a drag-and-drop method. Different lists has to accept different types of data.

Solution: Wrap the <s:List/> in <s:Group/> and manually call the dragEnter event and with it you call a function that can accept or reject the dragged data by checking it's 'format'. Accepting the drag source, the dragDrop event is dispatched and with that you can call a function to do whatever you want in your app ... for example, add the dragged data to the list.

NOTE: Remember if tou set the dragEnter and dragDrop directly on the component, you will ne be able to check the dragged data 'format' given all list controls uses the 'format' 'itemsByIndex'

Demo:

<fx:Script>
    <![CDATA[

    private function dragEnterHandler(e:DragEvent):void{
        if(e.dragSource.hasFormat('artist')){
            var dropTarget:Group = Group(e.currentTarget);
            DragManager.acceptDragDrop(dropTarget);
        }
    }

    private function dragDropHandler(e:DragEvent):void{
            // Check is the data alreay exists in the list;
            // Adds the data to the list dataGroup;
            // Do whatever you want ...     
    }

    ]]>
</fx:Script>

<s:Group id="myGroup" 
         dragDrop="dragDropHandler(event)" 
         dragEnter="dragEnterHandler(event)">
    <s:List id="myList" 
                dataProvider="{myDataProvider}"/>
</s:Group>

Hope this helps other people with the same problem! :)

Drag n' Drop spark List Itemrenders betwen components

1 Answers