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.

I am a rookie Flashbuilder and Flex developer.
This is a great post. I wouldn’t be able to come up with a solution like this.
I have couple questions:
What would your approach be if you need to add another button per row to allow deletion of each row?

@Steven Shongrunden
Thanks Steven. I started working on option 2 yesterday.
I placed an delete (image of an X) at the Icon location with iconFunction and used your method of putting an sprite on top of it to detect the delete press. It worked a few minutes ago.
Thanks for your great example and put me on the right path.