1 Reply Latest reply on Aug 4, 2011 8:57 AM by DougInOr

    Drag and Drop within a List drawn with an ItemRenderer

    DougInOr

      Trying to get drag and drop working properly with an itemRenderer on a list.  The itemRenderer is made up of several s:Label's and s:TextInput's (it's a lot like an itemEditor).  The problem starts when drag and drop is enabled in the list and I enter one of the text input's, but try to highlight text with my mouse.  The method to highlight is to mousedown and drag over the text in the text input to highlight the text.  This is a natural behavior of a typical user.

       

      However, as you can probably imagine, when the mousedown action happens, Flex bubbles up the entire itemrenderer and tries to initiate the drag.  Not an issue if I can just disable drag and drop while one of the TextInput's has focus or by doing event.preventDefault() to stop the process entirely if one of the TextInput's is under the MouseDown point.

       

      So, there's the problem... how do I keep drag and drop active, but make it inactive while a user is editing a field and using the mouse to do it??

       

      Things I've tried:

      - Finding the mousedowntarget (or something) and preventing the drag and drop if TextInput (a TextInput is nowhere in the available objects unfortunately)

      - Treating the DragEvent like a ListEvent and comparing event.currentTarget to a TextInput (event.currentTarget is always "List")

        • 1. Re: Drag and Drop within a List drawn with an ItemRenderer
          DougInOr Level 1

          Ok, found a decent work around.

           

          "MouseDown" is called before DragEvent is kicked off.  Therefore, if you set a function on the List for the "MouseDown" event, you can grab the "event.target", as it will reflect the correct control in the itemRenderer, and set "dragEnabled" based on that component type.  A TextInput control is classified as "RichEditableText" and am disabling drag and drop on that list if the control is a TextInput:

           

          protected function List_mouseDownHandler(event:MouseEvent):void{

           

          if(event.target is RichEditableText)

          (event.currentTarget

          as List).dragEnabled = false;

           

          else

          (event.currentTarget

          is List).dragEnabled = true;

          }