Using drag and drop with a spark List in a mobile Flex application
In a mobile Flex project the default interactionMode is touch. When in this mode drag and drop functionality on the spark List is not supported. This post demonstrates a workaround for adding drag and drop support to your mobile Lists by subclassing IconItemRenderer and dynamically changing the interactionMode on the fly.
The approach I took was just to get something simple working that would use the existing desktop drag and drop behavior (when interactionMode=mouse). First I subclassed IconItemRenderer and added a new Sprite that is drawn on top of the decorator object to receive a mouseDown event. When it receives that event it changes the interactionMode of the List and swaps out the Scroller skin for a new skin that doesn’t have any scrollbars. When the user mouses up the interactionMode and original Scroller skin are restored. Finally I had to set the DragManager cursor styles to an empty transparent gif.
This DraggableIconItemRenderer component inherits from IconItemRenderer so it has all of the features that class provides and just layers on top this primitive drag and drop ability. See DragThumb.fxg in the attached project ZIP for an example decorator that looks similar to a drag thumb used on iOS (check out the iPhone Weather app settings screen).
If your decorator is too small for someone to grab with their finger you might find the extraDragThumbHitPaddingTop, extraDragThumbHitPaddingLeft, extraDragThumbHitPaddingRight, extraDragThumbHitPaddingBottom properties useful to define a hit area that is larger than the decorator’s size.
Warning: This approach is one big hack, but it has worked well for me in some simple situations so I thought I would share it here in case others are interested in using this or taking it further.
Here is a sample Flex Mobile Project that demonstrates this code in action: DraggableIconItemRenderer.zip
Note: The DragManager code has not been optimized for mobile (see SDK-29334)