title: Flex drag and drop reorder of a HorizontalList control - Finding FROM and TO indexes?
body: <p>I have a Flex3 project with 2 HorizontalList controls; one of which has drag &amp; drop enabled. Both controls will always have the same number of items, and are related... index 0 from the 1st control matches index 0 from the 2nd control, and so on.</p>
  
  <p>Naturally, when using drag and drop to reorder the 2nd control, I want the items in the 1st control to reflect the same reordering. I think I can handle the actual updating of the control, but I'm having trouble finding the <strong>from</strong> and <strong>to</strong> indexes of the item that has been moved via drag &amp; drop.</p>
  
  <p>Using the <code>dragDrop</code> method on the control that allows drag and drop, and perusing the contents of <code>event.currentTarget</code> (instead of <code>event.target</code> <a href="http://livedocs.adobe.com/flex/3/langref/mx/core/UIComponent.html#event:dragDrop" rel="nofollow noreferrer">because the docs say so</a>) in the debugger shows a public property named <code>selectedIndex</code> which does seem to hold the <strong>from</strong> index, but I don't see any properties that will tell me the <strong>to</strong> index.</p>
  
  <p>Am I overlooking the property? Do I have to infer it based on something else? Is there a better way to do this?</p>
  
  <p><strong>update:</strong> An acceptable solution might also be to iterate over the contents of the HorizontalList and save the internal index value to an array that could then be used to re-sort the dataProvider for the other list; but I can't figure out how to iterate over the list contents, so I'm just as stuck. Any help there?</p>
  
  <p>Here's my code:</p>
  
  <p><code>main.mxml:</code></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:Application 
      xmlns:mx="http://www.adobe.com/2006/mxml" 
      xmlns:com="components.*"
      layout="absolute" 
  &gt;
      &lt;mx:Script&gt;
          &lt;![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());
              }
          ]]&gt;
      &lt;/mx:Script&gt;
  
      &lt;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"
      /&gt;
  
      &lt;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"
      /&gt;
  
  &lt;/mx:Application&gt;
  </code></pre>
  
  <p>The <code>Alert.show(...)</code> isn't there to show anything useful, I've set a breakpoint on that line so that I can inspect the event argument.</p>
  
  <p>I don't think the custom itemRenderer's are important (there's not much code to them, yet), so I'll leave them out for brevity's sake. If you think they <em>are</em> important, let me know and I'll edit them in here.</p>