Drag-and-drop Flex in HorizontalList control - Finding FROM and TO indexes?

I have a Flex3 project with 2 HorizontalList controls; one of which has drag and drop. Both controls will always have the same number of items and are related ... index 0 from 1st control corresponds to index 0 from 2nd control, etc.

Naturally, when using drag and drop to reorder the 2nd control, I want the items in the 1st control to display the same reordering. I think I can handle the actual update of the control, but I am having a hard time finding the indices from and to the item that was moved using drag and drop.

Using a method dragDrop

on a control that allows content to be dragged and re-read event.currentTarget

(instead of event.target

because the docs say so ) the debugger displays a public property named selectedIndex

that seems to contain an index from , but I don't see any properties that tell me to .

I can't see the properties? Should I be doing this based on something else? Is there a better way to do this?

the update: . An acceptable solution might also be to iterate over the contents of the HorizontalList and store the internal index value into an array, which can then be used to re-sort the dataProvider for another list; but I can't figure out how to iterate over the contents of the list, so I'm just stuck. Any help out there?

Here's my code:

main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:com="components.*"
    layout="absolute" 
>
    <mx:Script>
        <![CDATA[
            import mx.events.DragEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;

            //these two variables are junk data to represent 
            //what we will get back from our data services...
            [Bindable] 
            private var btnData:ArrayCollection = new ArrayCollection(
                [
                    {title:'title1', index:0},
                    {title:'title2', index:1},
                    {title:'title3', index:2},
                    {title:'title4', index:3}
                ]
            );
            [Bindable] 
            private var chainData:ArrayCollection = new ArrayCollection(
                [
                    {tmp:'testing 1'},
                    {tmp:'testing 2'},
                    {tmp:'testing 3'},
                    {tmp:'testing 4'}
                ]
            );

            //handle button re-ordering
            private function handleBtnReorder(event:DragEvent):void{
                Alert.show(event.action.toString());
            }
        ]]>
    </mx:Script>

    <mx:HorizontalList
        id="ChainView"
        dataProvider="{chainData}"
        itemRenderer="components.ItemRenderers.ChainLinkRenderer"
        left="20"
        right="20"
        top="20"
        height="300"
        rowHeight="300"
        columnWidth="500"
        rollOverColor="#ffffff"
        selectionColor="#eeeeee"
    />

    <mx:HorizontalList 
        id="btnList" 
        dataProvider="{btnData}"
        dragEnabled="true" 
        dropEnabled="true"
        dragMoveEnabled="true"
        dragDrop="handleBtnReorder(event)"
        itemRenderer="components.ItemRenderers.BtnListRenderer"
        horizontalCenter="true"
        left="20"
        right="20"
        top="320"
        height="50"
        rowHeight="35"
        rollOverColor="#ffffff"
        selectionColor="#ffffff"
    />

</mx:Application>

      

        
        
        
      

    

Alert.show(...)

doesn't exist to show anything useful, I set a breakpoint on that line so that I can check the event argument.

I don't think the custom itemRenderer is important (there isn't much code there), so I'll leave them for brevity. If you think they are important, let me know and I will edit them here.