4 Replies Latest reply on Feb 25, 2010 10:48 AM by Jaylach

    Drag & Drop with Flex 4

    Jaylach Level 1

      Hi Everyone,


      First off - I apologize if this is not the correct place for this question. I'm having a hard time getting Drag & Drop to work with my Flex 4 application. Here's my situation:


      I have a custom built List control that functions like a Tree (since Flex 4 does not yet have a native skinnable Tree). I need to drag an item from this tree into another custom built List control (both these inherit from List). The dragging portion works great. I can easily drag the item out of the tree and over the second list. The problem comes in when I try to get the second list to accept the drop.


      If I use DragManager.acceptDragDrop(this as IUIComponent), the list does not accept the drop. The cursor stays with the little red X and the dragDrop event is never fired. If I use DragManager.acceptDragDrop(event.dragInitiator), the little red X goes away and the feedback correctly shows the Copy indicator. However, doing this does not fire off the dragDrop event as the list still is not a valid target for the drop. I have tried adding event listeners and override the dragEnterHandler and dragDropHandlers on the target List component. I cannot, for the life of me, seem to get the list to accept the drag/drop. Below is a snippet of my code:


      protected override function dragEnterHandler(e:DragEvent):void {

           if ( e.dragSource.hasFormat("presentationFromTree") ) {

                var dropTarget:ExList = ExList(e.currentTarget);



           } else {




      protected override function dragDropHandler(e:DragEvent):void {

           /***** This function never fires.... *****/


           if ( e.dragSource.hasFormat("presentationFromTree") ) {

                // Handle the dropping of data from the fileManager tree

                var itemData:XML = XML(e.dragSource.dataForFormat("presentationFromTree"));









        • 1. Re: Drag & Drop with Flex 4
          Flex harUI Adobe Employee

          You might need to call event.preventDefault in your handlers.

          1 person found this helpful
          • 2. Re: Drag & Drop with Flex 4
            Jaylach Level 1

            Thanks for the reply! I think I've actually found the problem. I don't know if it's a bug or if it's a problem with my code. Here's a little background on my setup and the issue I've found -


            I have a custom list component named "ExList". The only reason for this custom component is so I can define custom styles. I wasn't able to find out if I could define custom style on skins so I just went with the custom component approach. This list is used to display some images in a TileLayout. I need to be able to drag items from another list of mine into this list.


            This "ExList" has a custom skin. Within this Skin I do exactly what the default Spark skin does - I create a scroller with the id of "scroller" and I create a dataGroup with the id of "dataGroup". This is where the problem lies.


            When I drag the item over my list, I get the correct green "+" arrow for the first 4 pixles of the control and then nothing. The "scroller" is inset 4 pixles on my skin. My best guess here is the Scroller within the Skin is being treated as a separate component instead of just part of the main container (parent) component for drag/drop operations.


            I was able to work around this issue by listening for the dragEnter and dragDrop events on the 'scroller' component. It works for now, but it's not the most ideal solution.

            • 3. Re: Drag & Drop with Flex 4
              Flex harUI Adobe Employee

              Are you saying that preventDefault did not work?

              • 4. Re: Drag & Drop with Flex 4
                Jaylach Level 1

                Sorry! yes, I am. When I realized that event.preventDefault() didn't work either it prompted me to look in other areas - like the Skin