[flexcoders] TileList Drag Problem

[solarpower999]

Hello, I was wondering if someone could help me with this problem.  I
setup a drag and drop operation from a TileList control to a TextArea
control and everything works fine.  However, there is a bug with the
implementation that makes it look unprofessional.  The problem lies in
the handleMouseMove() method and when the TileList contains enough
boxes so that the scroll bar appears.  When the user clicks and drags
the scroll bar, the currently select box in the TileList starts to
drag along with the scroll bar.  I don't want it to do that.  From
looking at the code, it is obvious to see why it is doing that, but
the problem is coming up with a solution to prevent it from doing so.

I added the code below to the handleMouseMove() method, but the objs
Array is always null:

          var tl:TileList = TileList(event.currentTarget);
          var globalPoint:Point = new Point(tl.mouseX, tl.mouseY);
          var localPoint:Point = tl.globalToLocal(globalPoint);
          var objs:Array = tl.getObjectsUnderPoint(localPoint);

The best solution would be to get the current mouse position and check
if that point lies inside the selected item in the TileList, but I
just can't seem to find a way to do so.  Does anyone have any suggestions?


<mx:Canvas
  creationComplete="init();"
  xmlns:mx="http://www.adobe.com/2006/mxml";
>
  
  <mx:Script>
    <![CDATA[
      import mx.controls.listClasses.ListItemDragProxy;
      import mx.core.DragSource;
      import mx.managers.DragManager;
      
      [Bindable]
      [Embed(source='/assets/boxes/box1.gif')]
      private var imgBox1:Class;
      
      [Bindable]
      [Embed(source='/assets/boxes/box2.gif')]
      private var imgBox2:Class;
      
      
      private function handleMouseMove(event:MouseEvent):void
      {
        // start the drag operation
        if (event.buttonDown)
        {
          startTagDrag(event, 'box');
        }
      }
      
      
      private function init():void
      {
        // initialize event listeners
        lstBoxes.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
      }
      
      
      private function startTagDrag(event:MouseEvent, format:String):void
      {
        // set up a proxy and start the drag operation
        var dragInitiator:TileList = TileList(event.currentTarget);
        
        var ds:DragSource = new DragSource();
        ds.addData(dragInitiator.selectedItem, format);
        
        var dragProxy:ListItemDragProxy = new ListItemDragProxy();
        dragProxy.owner = dragInitiator;
        
        DragManager.doDrag(dragInitiator, ds, event, dragProxy);
      }
    ]]>
  </mx:Script>
  
  <mx:Array id="aryBoxes">
    <mx:Object label="Box 1" boxName="box-1" icon="{ imgBox1 }" />
    <mx:Object label="Box 2" boxName="box-2" icon="{ imgBox2 }" />
  </mx:Array>
  
  <mx:VBox>
    <mx:TileList
      id="lstBoxes"
      dataProvider="{ aryBoxes }"
    />
  </mx:VBox>
  
</mx:Canvas>